/* ==========================================================================
   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;
}
.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);
}
.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 ----------------------------------------------------------
   BEWUSST NUR OPTIK, KEIN LAYOUT. Das Formular arbeitet intern mit absolut
   positionierten Elementen (u. a. `.main-search-button` mit
   `position:absolute; right:0`) und mit slick/daterangepicker-Aufsaetzen.
   Ein Umbau auf Flexbox liess den Button ueber das Gaestefeld rutschen.
   Der Umbau gehoert laut Spec ohnehin in PHASE 2 (Suche & Trefferliste) und
   passiert dort zusammen mit dem Markup — hier bleibt es bei Farbe, Rundung
   und Schatten.
   -------------------------------------------------------------------------- */
.main-search-input {
  border-radius: var(--hr-radius-lg);
  box-shadow: var(--hr-shadow-lg);
  overflow: hidden;
}

.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); }