/* ==========================================================================
   halal-reisen — Startseite (Task 13)

   Diese Datei stellt die BESTEHENDEN Bausteine der Startseite auf die neuen
   Tokens um. Das Markup dieser Abschnitte wird bewusst nicht angefasst: An ihm
   haengen die Datenbindungen (u. a. "Beliebteste Hotels" aus der lokalen DB,
   siehe docs/besonderheiten.md §9) sowie die slick-Karussells.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.hero-section {
  position: relative;
  /* Grundfarbe unter dem Foto. Das Hintergrundbild deckt schmale Viewports
     nicht auf voller Hoehe ab — bei 375px stand der weisse Titel dadurch auf
     nahezu weissem Grund. Mit dieser Flaeche hat weisser Text ueberall
     mindestens 12:1 Kontrast, auch wenn das Bild fehlt oder spaeter laedt. */
  background-color: var(--hr-dark);
}

/* Das Foto lag in einem Kasten fester Hoehe (gemessen 375px) innerhalb einer
   1097px hohen Section: Auf dem Smartphone endete das Bild nach einem knappen
   Drittel, darunter stand eine harte Kante und einfarbiges Dunkelgruen. Ein
   Inline-Style im Layout korrigierte das bisher nur zwischen 570 und 1024px. */
.hero-section .hero-parallax {
  height: 100%;
  max-height: none;
}

.hero-section .hero-parallax .bg {
  background-position: center;
  background-size: cover;
}

/* Dunkler Verlauf ueber dem Foto: Der weisse Text stand vorher ohne Abdunklung
   direkt auf dem Bild und war je nach Bildausschnitt kaum lesbar.

   Die Werte sind GEMESSEN, nicht geschaetzt: Das Banner `new-banner.jpg` wurde
   an neun Punkten auf Hoehe des Titels abgetastet (hellstes Tuerkis
   rgb(129,207,213)) und der Kontrast zu Weiss fuer verschiedene Deckungen
   berechnet:

       Deckung   0,30   0,45   0,55   0,65   0,72
       schlecht. 2,90   3,83   4,64   5,73   6,64

   Bis Task 14 lag die Deckung auf Hoehe des Textes bei rund 0,30 — Kontrast
   2,90 und damit klar unter AA (4,5). Der Verlauf ist deshalb im unteren
   Bereich, wo Titel und Untertitel stehen, auf 0,68 angehoben. */
.hero-section .hero-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(10, 61, 46, 0.55) 0%,
              rgba(10, 61, 46, 0.48) 30%,
              rgba(10, 61, 46, 0.68) 65%,
              rgba(10, 61, 46, 0.80) 100%);
  pointer-events: none;
}

.hero-section-wrap { position: relative; z-index: 2; }

/* `section.hero-section` (Elementtyp + Klasse) ist noetig, um die gleich
   spezifische Altregel zu schlagen, die den Hero auf Weiss setzt. */
section.hero-section { background-color: var(--hr-dark); }

.home-intro {
  text-align: center;
  margin-top: var(--hr-space-6);
  /* Eine Mobil-Regel im alten Stylesheet legte hier ein blasses Mint
     (#E0F2E5) unter — der weisse Titel war darauf praktisch unlesbar. */
  background-color: transparent;
}
/* h1 seit Task 16 (vorher trug der Hero ein h2 und die Startseite hatte gar
   keine h1). h2 bleibt im Selektor, damit die Regel auch greift, falls das
   Markup irgendwo noch die alte Ebene verwendet. */
.home-intro h1,
.home-intro h2 {
  color: #FFFFFF;
  font-size: var(--hr-text-3xl);
  font-weight: var(--hr-weight-bold);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(10, 61, 46, 0.45);
  margin: 0;
}
.home-intro h1 .green,
.home-intro h1 span.green,
.home-intro h2 .green,
.home-intro h2 span.green { color: var(--hr-accent); }
.home-intro h3 {
  max-width: 60ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-normal);
  line-height: var(--hr-leading-snug);
  text-shadow: 0 1px 8px rgba(10, 61, 46, 0.45);
}

/* Die geschwungene weisse Trennkante am Fuss des Heros an die Sandflaeche
   angleichen — sie war auf Weiss gesetzt und riss eine sichtbare Kante. */
.liner svg path { fill: var(--hr-bg) !important; }

/* --- Suchformular ----------------------------------------------------------
   NIEMALS `overflow: hidden` auf `.main-search-input` setzen (Task 15).

   Kalender und Gaesteklappe sind absolut positionierte Aufsaetze, die per
   `parentEl` INNERHALB dieses Containers haengen. Ein `overflow: hidden` — hier
   frueher gesetzt, um die Ecken zu runden — schneidet sie vollstaendig weg.
   Gemessen: Die Klappe oeffnete korrekt (299x100 px), war aber unsichtbar; das
   Datumsfeld ebenso (556x234 px). Beide Felder wirkten dadurch tot.

   Die Rundung uebernehmen stattdessen die Randkinder.
   -------------------------------------------------------------------------- */
.main-search-input {
  border-radius: var(--hr-radius-lg);
  box-shadow: var(--hr-shadow-lg);
}
.main-search-input > .main-search-input-item:first-child {
  border-top-left-radius: var(--hr-radius-lg);
  border-bottom-left-radius: var(--hr-radius-lg);
}
.main-search-input > .main-search-button {
  border-top-right-radius: var(--hr-radius-lg);
  border-bottom-right-radius: var(--hr-radius-lg);
}

.main-search-input-item i,
.main-search-input-item .fal,
.main-search-input-item .fas { color: var(--hr-primary); }

.main-search-button {
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  font-family: var(--hr-font-sans);
  font-weight: var(--hr-weight-semibold);
  transition: background-color var(--hr-transition);
}
.main-search-button:hover { background-color: var(--hr-primary-hover); }
.main-search-button:focus-visible { outline: none; box-shadow: var(--hr-focus-ring); }

/* --- Merkmalskacheln unter dem Suchfeld ------------------------------------ */
.form-bottom {
  margin-top: var(--hr-space-6);
  /* style.css legt unter 1024px ein `background: #fefefe` unter den ganzen
     Block. Die sechs weissen Kacheln verschmolzen damit zu EINER grossen
     weissen Flaeche, in der die Abstaende als helle Fugen verschwanden. */
  background: transparent;
}
.form-bottom .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hr-space-3);
  margin: 0;
}
/* 🐞 DIE URSACHE DER VERSETZTEN KACHELN (behoben in Task 14).
   `.row` traegt aus dem Bootstrap-Erbe einen Clearfix: `.row::before` und
   `.row::after` mit `content:" "` und `display:table`. In einem Float-Layout
   sind das unsichtbare Helfer — in einem GRID werden sie zu vollwertigen
   Grid-Items und belegen je eine Zelle.

   Gemessen bei 375px: 6 Kacheln + 2 Pseudo-Elemente = 8 Zellen. Die erste
   Kachel sass dadurch in Spalte 2 (`left: 375px` statt 0), alles rutschte um
   eine Zelle weiter, und es blieben genau zwei Luecken: oben links (das
   `::before`) und unten rechts (die verschobene letzte Kachel).

   Merke: Wird eine `.row` aus dem Alt-CSS auf Grid oder Flex umgestellt,
   MUESSEN diese beiden Pseudo-Elemente abgeschaltet werden. */
.form-bottom .row::before,
.form-bottom .row::after { content: none; display: none; }
@media (min-width: 768px) {
  .form-bottom .row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1064px) {
  .form-bottom .row { grid-template-columns: repeat(6, 1fr); }
}
/* Die Bootstrap-Spaltenbreiten wuerden dem Raster entgegenwirken. */
.form-bottom .row > [class*='col-'] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  float: none;
}
/* Zwischen 768 und 1023 px versteckte style.css (Zeile 11491) die letzten ZWEI
   Kacheln komplett: `.form-bottom .col-xs-6:last-child,
   .form-bottom .col-xs-6:nth-last-child(2) { display: none }`. Auf Tablets
   fehlten damit "Keine versteckten Gebühren" und "Reiserücktrittsversicherung"
   ersatzlos — vermutlich ein Notbehelf, damit die alte 4-Spalten-Reihe nicht
   angebrochen aussah. Im Raster ist das nicht noetig. */
@media (min-width: 768px) and (max-width: 1023px) {
  .form-bottom .row > [class*='col-']:last-child,
  .form-bottom .row > [class*='col-']:nth-last-child(2) { display: block; }
}

.form-bottom .icon_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Zentriert statt oben ausgerichtet: Die sechs Beschriftungen sind zwischen
     einer und drei Zeilen lang. Bei `flex-start` sammelte sich der Unterschied
     als Weissraum unter den kurzen Texten. */
  justify-content: center;
  gap: var(--hr-space-2);
  height: 100%;
  /* `margin: 10px 0` aus style.css wuerde die Kacheln im Raster gegeneinander
     verschieben — der Abstand kommt hier vom `gap`. */
  margin: 0;
  padding: var(--hr-space-4) var(--hr-space-2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--hr-radius);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--hr-dark);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-medium);
  line-height: var(--hr-leading-snug);
  text-align: center;
  /* `hyphens` trennt an erlaubten Stellen. `overflow-wrap: anywhere` stand
     hier ebenfalls und trennte zusaetzlich mitten im Wort ohne Bindestrich —
     das brauchen die Beschriftungen nicht. */
  hyphens: auto;
}
.form-bottom .icon_box .material-icons,
.form-bottom .icon_box i {
  color: var(--hr-primary);
  font-size: 1.75rem;
}

/* Abschnittsueberschriften liegen zentral in components.css.
   Auf dem Hero-Foto bleibt der Text abweichend weiss. */
.hero-section .main_title_2 p,
.hero-section .section-title p { color: rgba(255, 255, 255, 0.9); }

/* --- "Ideen für Halal-Reisen" ----------------------------------------------
   NEU IN TASK 14 — vorher `.home-grid` mit Text auf dem Foto.

   Warum das Konzept gewechselt hat:
     * Die Kacheln waren unterschiedlich hoch (gemessen 191 / 350 / 215 / 243 px
       bei gleicher Breite), weil ihre Hoehe allein vom Seitenverhaeltnis des
       Bildes kam. Als Floats verhakten sie sich an der hoechsten Nachbarkachel.
     * Nur zwei von neun hatten einen Text — die uebrigen wirkten leer.
     * Weisser Text auf hellen Fotos brauchte eine dunkle Verlaufsabdeckung, die
       das Bild selbst wieder verdeckte.

   Jetzt: Bild oben im festen 16:9, Text darunter auf Flaeche. Die Karten sind
   dadurch von sich aus gleich hoch, der Text ist unabhaengig vom Motiv lesbar,
   und das Bild bleibt unverdeckt.

   Die Regeln dazu (`.hr-ideas`, `.hr-idea`) stehen in components.css, nicht
   hier: Die Seite "Umrah Hotels in Mekka und Medina" benutzt dasselbe Muster,
   laedt aber nur die gemeinsamen Stylesheets.
   -------------------------------------------------------------------------- */

/* --- "Die beliebtesten Hotels" ---------------------------------------------
   Der Abschnitt liegt auf einem Parallax-Foto (`bg/parallax.jpg`, ein
   tuerkisfarbenes Meer). Darauf stand der Textblock in Dunkelgruen — gemessener
   Kontrast rund 1,5:1, die Ueberschrift "Die beliebtesten Hotels" war praktisch
   nicht zu lesen.

   Das Foto bleibt (es gibt der Seite Rhythmus), bekommt aber eine dunkle
   Abdeckung; der Text darauf ist jetzt weiss. Deckung 0,72 auf dem hellsten
   Punkt des Fotos ergibt gegen Weiss einen Kontrast von 6,4:1 (AA fuer jede
   Textgroesse).
   -------------------------------------------------------------------------- */
.hotel_list {
  position: relative;
  padding-block: var(--hr-section-y);
  background-color: var(--hr-dark);
}
.hotel_list::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(10, 61, 46, 0.78) 0%,
              rgba(10, 61, 46, 0.68) 50%,
              rgba(10, 61, 46, 0.80) 100%);
  pointer-events: none;
}
.hotel_list > .container { position: relative; z-index: 2; }

.hotel_list .colomn-text-title h3,
.hotel_list .colomn-text-title h4 { color: #FFFFFF; }
.hotel_list .colomn-text-title p { color: rgba(255, 255, 255, 0.9); }
.hotel_list .colomn-text-title h4 {
  margin-bottom: var(--hr-space-3);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-normal);
}

/* Die Karten des Karussells standen vertikal versetzt: slick gibt jedem Slide
   `float: left` und die Hoehe des Inhalts. Mit einem Flex-Track stehen sie auf
   einer Linie und sind gleich hoch. */
.light-carousel .slick-track {
  display: flex;
  align-items: stretch;
}
.light-carousel .slick-slide { height: auto; }
.light-carousel .slick-slide > div,
.light-carousel .slick-slide-item,
.light-carousel .hotel-card { height: 100%; }
.light-carousel .geodir-category-img.card-post img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Karten der Abschnitte ------------------------------------------------- */
.listing-item-grid,
.listing-hotel-item,
.geodir-category-listing {
  border-radius: var(--hr-radius-lg);
  overflow: hidden;
  background-color: var(--hr-surface);
  border: 1px solid var(--hr-border);
  transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.listing-item-grid:hover,
.listing-hotel-item:hover,
.geodir-category-listing:hover {
  border-color: var(--hr-border-strong);
  box-shadow: var(--hr-shadow-lg);
}

.geodir-category-img img,
.listing-item-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.geodir-category-content-title-item h3,
.colomn-text-title h3 {
  color: var(--hr-dark);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-semibold);
}

.geodir-category-location a,
.desc_icons { color: var(--hr-text-muted); font-size: var(--hr-text-sm); }

/* --- Karussell-Pfeile ------------------------------------------------------ */
.fc-cont {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hr-tap);
  height: var(--hr-tap);
  border: 1px solid var(--hr-border-strong);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-surface);
  color: var(--hr-dark);
}
.fc-cont:hover { background-color: var(--hr-primary); color: var(--hr-text-on-dark); }