/* ==========================================================================
search-card.css — Trefferkarten der Suche (/search-hotels)
==========================================================================
Deckt BEIDE Ansichten ab:
Teil I (Abschnitt 1-5) — Ergebnisliste, Karte `div.search-i--container`
Teil II (Abschnitt 6-10) — Kartenansicht, Karte `div.offers-i--container_map`
WICHTIG: Diese Datei stylt FREMD-MARKUP.
Die Karten (`div.search-i--container`) rendern wir nicht selbst. Sie werden
in `SearchHotels::searchHotelApiNew()` per XPath aus der Ergebnisseite von
halalbooking.com herausgeschnitten und von `public/frontend/js/search-hotel.js`
in `#hotel_list .listing-item-container` eingehaengt.
`public/frontend/css/hotel.css` ist ein alter Abzug des halalbooking-CSS. Das
heutige Markup benutzt Klassen, die es dort nicht (mehr) gibt — u. a. `.flex`,
`.search-i-content--container`, `.aggregate-score-container`, `.slider*`.
Deshalb liegen unsere Korrekturen hier in einer eigenen Datei statt in der
Fremdkopie: so bleibt trennbar, was von halalbooking stammt und was von uns.
Diese Datei wird in `resources/views/layouts/app.blade.php` NACH `hotel.css`
eingebunden und gewinnt dadurch bei gleicher Spezifitaet.
Erwartete Markup-Struktur (verifiziert am 2026-08-05 gegen die Live-Seite):
div.search-i--container
div.search-i.search-i_link.card_link
div.save-property <- Merkzettel-Herz
a.flex
div.search-i-img--container
div.slider > div.slider--track > n x div.slider--item > img.search-i-img
div.slider--arrow_prev / _next, div.slider--dots
div.aggregate-score-container
div.aggregate-score <- Label ("Gut") + Anzahl Bewertungen
div.property-score <- Note ("7,4")
div.search-i-content--container <- Titel, Ort, Halal-Merkmale, Preis
Benennt halalbooking diese Klassen um, bricht die Karte erneut — dann ist die
Struktur oben der Vergleichspunkt. Siehe tasks/04-design-fix/spec.md.
========================================================================== */
/* --------------------------------------------------------------------------
1. Karte als zweispaltige Flex-Zeile
-------------------------------------------------------------------------- */
.search-i {
overflow: hidden;
border-radius: 10px;
}
/* Der Link umschliesst Bild- und Textspalte. `a.flex` kommt aus dem Fremd-Markup
ohne passende Regel und ist sonst `display:inline`. */
.search-i > a.flex {
display: flex;
align-items: stretch;
width: 100%;
color: inherit;
text-decoration: none;
}
/* Merkzettel-Herz darf die Flex-Zeile nicht als eigene Spalte aufbrechen. */
.search-i > .save-property {
position: absolute;
z-index: 4;
top: 10px;
right: 10px;
}
/* --------------------------------------------------------------------------
2. Bildspalte — volle Kartenhoehe statt kollabierter Slider-Hoehe
-------------------------------------------------------------------------- */
/* Hebt die alte Regel aus hotel.css auf (position:absolute; width:240px). */
.search-i .search-i-img--container {
position: relative;
z-index: 1;
top: auto;
left: auto;
flex: 0 0 280px;
align-self: stretch;
width: 280px;
min-height: 260px;
height: auto;
overflow: hidden;
background-color: #eee;
}
.search-i .search-i-img--container .slider,
.search-i .search-i-img--container .slider--track,
.search-i .search-i-img--container .slider--item {
position: static;
height: auto;
}
/* Ohne halalbookings Slider-JS ist nur die erste Slide sinnvoll. Die uebrigen
`![]()
` haben kein `data-src` und wuerden je nach Browser als kaputtes Bild
samt Alt-Text ueber dem Foto liegen (siehe search-hotel.js). */
.search-i .search-i-img--container .slider--item:not(:first-child),
.search-i .search-i-img--container .slider--arrow,
.search-i .search-i-img--container .slider--dots {
display: none;
}
.search-i img.search-i-img {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/* Weicher Verlauf am oberen Bildrand, damit das Bewertungs-Badge auch auf
hellen Fotos (Himmel, Strand) lesbar bleibt. */
.search-i .search-i-img--container:before {
content: "";
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 90px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
pointer-events: none;
}
/* --------------------------------------------------------------------------
3. Textspalte
-------------------------------------------------------------------------- */
.search-i .search-i-content--container {
flex: 1 1 auto;
min-width: 0;
padding: 15px;
text-align: left;
}
/* Alte Regel aus hotel.css: margin-left:240px fuer die inzwischen weggefallene
Aufteilung. Innerhalb der Flex-Zeile ist der Einzug falsch. */
.search-i .search-i-content {
margin-left: 0;
padding: 0;
}
/* --------------------------------------------------------------------------
4. Bewertungs-Badge (ersetzt den orangen Balken)
-------------------------------------------------------------------------- */
/* GEMEINSAM MIT DER KARTENANSICHT (Teil II).
Jede Regel hier nennt beide Kontexte — `.search-i` (Ergebnisliste) und
`.offers-i_map` (Kartenansicht) —, damit das Badge in beiden Ansichten aus
denselben Deklarationen entsteht und nicht auseinanderlaufen kann. Neue
Badge-Eigenschaften bitte immer in diesen Block und immer mit beiden
Selektoren. Nur die Positionierung des Badges unterscheidet sich, weil das
Fremd-Markup den Container unterschiedlich einhaengt (siehe Abschnitt 9). */
.search-i .aggregate-score-container,
.offers-i_map .aggregate-score-container {
position: absolute;
z-index: 3;
left: 10px;
top: 10px;
display: flex;
/* `.property-score` (die Note) steht im Markup NACH dem Label — mit
row-reverse steht die Zahl links, Label und Anzahl rechts daneben. */
flex-direction: row-reverse;
align-items: center;
gap: 8px;
max-width: calc(100% - 20px);
border-radius: 10px;
padding: 6px 10px;
background-color: rgba(17, 17, 17, 0.8);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
color: #fff;
text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
.search-i .aggregate-score-container,
.offers-i_map .aggregate-score-container {
background-color: rgba(17, 17, 17, 0.62);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
}
/* Hotels ohne Bewertung duerfen kein leeres Badge zeigen. */
.search-i .aggregate-score-container:empty,
.offers-i_map .aggregate-score-container:empty {
display: none;
}
.search-i .aggregate-score-container:not(:has(.property-score)),
.offers-i_map .aggregate-score-container:not(:has(.property-score)) {
display: none;
}
/* Die Note: oranger Balken raus, grosse Zahl rein. */
.search-i .aggregate-score-container .property-score,
.offers-i_map .aggregate-score-container .property-score {
flex-shrink: 0;
border-radius: 0;
padding: 0;
background-color: transparent;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.1;
}
/* Label ("Gut" / "Sehr gut") und Anzahl der Bewertungen. */
.search-i .aggregate-score-container .aggregate-score,
.offers-i_map .aggregate-score-container .aggregate-score {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
float: none;
min-width: 0;
color: #fff;
line-height: 1.25;
font-size: 13px;
text-align: left;
text-decoration: none;
}
.search-i .aggregate-score-container .aggregate-score > *,
.offers-i_map .aggregate-score-container .aggregate-score > * {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Zweite Zeile (Anzahl der Bewertungen) leicht zurueckgenommen. */
.search-i .aggregate-score-container .aggregate-score > * + *,
.offers-i_map .aggregate-score-container .aggregate-score > * + * {
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
}
.search-i .aggregate-score-container .aggregate-score--all,
.search-i .aggregate-score-container .aggregate-score--label,
.offers-i_map .aggregate-score-container .aggregate-score--all,
.offers-i_map .aggregate-score-container .aggregate-score--label {
max-width: 100%;
color: inherit;
text-decoration: none;
}
/* --------------------------------------------------------------------------
5. Schmale Viewports — Karte stapelt, Bild oben in voller Breite
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.search-i > a.flex {
display: block;
}
.search-i .search-i-img--container {
flex: none;
width: 100%;
height: 220px;
min-height: 0;
}
.search-i .search-i-content--container {
padding: 12px 15px 15px;
}
}
/* ==========================================================================
TEIL II — Kartenansicht (Liste neben der Google-Map)
==========================================================================
Auch hier Fremd-Markup: `SearchHotels::getMapPlaces()` schneidet die Karten
(`div.offers-i--container_map`) aus dem Turbo-Frame `offers_map_search_results`
von halalbooking.com heraus, `getPlacesMap()` in `search-hotel.js` haengt sie
in `.googleMapList` (Desktop) bzw. `.hotelMobileMap` (mobiles Modal) ein.
Es ist ein ANDERER Klassensatz als in der Ergebnisliste (`.offers-i`, `.card*`
statt `.search-i*`) — er fehlt in `hotel.css` genauso. Ziel ist trotzdem
dieselbe Optik: das Badge kommt aus Abschnitt 4, hier stehen nur Layout und
die groessenbedingten Abweichungen (schmalere Spalte).
Erwartete Markup-Struktur (verifiziert am 2026-08-06 gegen die Live-Seite):
div.offers-i--container.offers-i--container_map <- data-id via JS
a.offers-i.offers-i_map.card.card_outer
div.card--image--container
div.slider > div.slider--track > div.slider--item > img.card--image
div.card--header
div…flex > span.font-large-body <- Hotelname
> div.stars <- Sterne
div.location <- "Afyon, Tuerkei" + svg
div > div.card--footer <- Preis, Konditionen, Zimmer
div.aggregate-score-container <- Label + Anzahl + Note
(im Markup DIREKTES Kind des Links, nicht im Bildcontainer!)
Siehe tasks/05-kartenansicht-design/spec.md.
========================================================================== */
/* --------------------------------------------------------------------------
6. Karte — gestapelt, linksbuendig
-------------------------------------------------------------------------- */
.offers-i--container_map {
overflow: hidden;
border-radius: 10px;
background-color: #fff;
}
/* Der Link umschliesst die gesamte Karte und traegt das absolut positionierte
Badge (Abschnitt 9). Die Zentrierung kommt geerbt von aussen. */
.offers-i--container_map > a.offers-i_map {
position: relative;
display: block;
overflow: hidden;
border-radius: 10px;
color: inherit;
text-align: left;
text-decoration: none;
}
/* --------------------------------------------------------------------------
7. Bildspalte — volle Breite, feste Hoehe (wie die gestapelte Liste)
-------------------------------------------------------------------------- */
/* 200px statt der 220px aus Abschnitt 5: die Spalte ist mit 290px deutlich
schmaler, so bleiben mehr Treffer gleichzeitig sichtbar. */
.offers-i_map .card--image--container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background-color: #eee;
}
.offers-i_map .card--image--container .slider,
.offers-i_map .card--image--container .slider--track,
.offers-i_map .card--image--container .slider--item {
position: static;
width: 100%;
height: 100%;
}
/* `getMapPlaces()` reduziert serverseitig bereits auf die erste Slide und
entfernt Pfeile/Dots — defensiv trotzdem, falls sich das Fremd-HTML aendert. */
.offers-i_map .card--image--container .slider--item:not(:first-child),
.offers-i_map .card--image--container .slider--arrow,
.offers-i_map .card--image--container .slider--dots {
display: none;
}
.offers-i_map img.card--image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/* Verlauf am oberen Bildrand — identisch zur Ergebnisliste, damit das Badge
auch auf hellen Fotos lesbar bleibt. */
.offers-i_map .card--image--container:after {
content: "";
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 90px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
pointer-events: none;
}
/* --------------------------------------------------------------------------
8. Inline-SVGs neutralisieren
-------------------------------------------------------------------------- */
/* Die Icons referenzieren per `