/* ==========================================================================
   halal-reisen — Inhaltsseiten (Task 14)

   Gemeinsame Ebene fuer alle textgetriebenen Seiten:
     Blog (frontend/post/*), Statikseiten (frontend/page/*),
     Touren (frontend/tours/*), Benutzerbereich (user/*),
     Fehlerseiten (errors/*), Sonderseiten (Mekka/Medina, Flugbuchung).

   Warum eine gemeinsame Datei statt einer pro Seite: Diese Seiten benutzen
   dasselbe Alt-Markup (`list-single-main-item`, `post-container`, `card-post`,
   Seitenleiste als `.sidebar`). Eine Datei je Seite haette dieselben Regeln
   fuenfmal enthalten.
   ========================================================================== */

/* --- Seitenkopf ------------------------------------------------------------
   Die alten Seiten starten mit einem Hero-Bild samt Titel darauf. Das Bild ist
   je nach Seite ein anderes und der Titel stand darauf mal weiss, mal dunkel.
   Hier wird daraus ein ruhiger, immer lesbarer Kopf.
   -------------------------------------------------------------------------- */
.hr-page-head {
  padding-block: var(--hr-space-6);
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
}
.hr-page-head h1,
.hr-page-head h2 {
  margin: 0;
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-2xl);
}
.hr-page-head p {
  margin: var(--hr-space-2) 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--hr-text-base);
}

/* Altes Hero-Markup der Inhaltsseiten auf denselben Nenner bringen. */
.parallax-header,
.page-header,
.breadcrumbs-fs {
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
}
.parallax-header h1,
.parallax-header h2,
.page-header h1,
.page-header h2 { color: var(--hr-text-on-dark); }

/* --- Inhaltsflaeche --------------------------------------------------------- */
.hr-content-section { padding-block: var(--hr-section-y); }

/* `grey-bg` und `white-bg` setzen im Alt-CSS eigene Graustufen. */
.grey-bg  { background-color: var(--hr-bg); }
.white-bg { background-color: var(--hr-surface); }

/* Die Inhaltsbloecke der alten Seiten: aus randlosen Flaechen werden Karten. */
.list-single-main-item,
.post-container,
.hr-panel {
  margin-bottom: var(--hr-space-5);
  padding: var(--hr-space-5);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  /* Das Alt-CSS zentriert grosse Teile des Inhaltsbereichs — bei Fliesstext
     ergibt das einen flatternden linken Rand. */
  text-align: left;
}
.hr-prose,
.box-widget,
.hr-sidebar__block { text-align: left; }
.list-single-main-item-title h3,
.list-single-main-item-title h4 {
  margin: 0 0 var(--hr-space-4);
  padding-bottom: var(--hr-space-3);
  border-bottom: 1px solid var(--hr-border);
  color: var(--hr-dark);
  font-size: var(--hr-text-xl);
}

/* --- Fliesstext ------------------------------------------------------------
   Redaktioneller Text kommt aus dem Admin-Editor und bringt sein eigenes
   Markup mit (h2/h3, Listen, Zitate, Tabellen, Bilder).
   -------------------------------------------------------------------------- */
.hr-prose { color: var(--hr-text); line-height: var(--hr-leading); }
.hr-prose > * + * { margin-top: var(--hr-space-4); }
.hr-prose h2 { margin-top: var(--hr-space-6); font-size: var(--hr-text-xl); }
.hr-prose h3 { margin-top: var(--hr-space-5); font-size: var(--hr-text-lg); }
.hr-prose ul,
.hr-prose ol { padding-left: var(--hr-space-5); }
.hr-prose li + li { margin-top: var(--hr-space-2); }
.hr-prose img { border-radius: var(--hr-radius); }
.hr-prose a { text-decoration: underline; }
.hr-prose blockquote {
  margin: 0;
  padding: var(--hr-space-4) var(--hr-space-5);
  border-left: 4px solid var(--hr-primary);
  background-color: var(--hr-surface-sunken);
  border-radius: 0 var(--hr-radius) var(--hr-radius) 0;
}
/* Breite Tabellen duerfen die Seite nicht seitlich schieben. */
.hr-prose table { display: block; width: 100%; overflow-x: auto; }

/* --- Zweispalter: Inhalt + Seitenleiste ------------------------------------
   Bis Task 14 lagen Inhalt und Seitenleiste in Bootstrap-Spalten (col-md-8 /
   col-md-4). Unter 992px stapelten sie zwar, aber die Seitenleiste stand dann
   MIT ihrem Float weiter im Weg. Hier ein Grid — und unter 1064px rutscht die
   Seitenleiste sauber unter den Inhalt.
   -------------------------------------------------------------------------- */
.hr-with-sidebar {
  display: grid;
  gap: var(--hr-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1064px) {
  .hr-with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--hr-space-6); }
}
.hr-with-sidebar > * { min-width: 0; }

.hr-sidebar__block {
  margin-bottom: var(--hr-space-5);
  padding: var(--hr-space-4);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
}
.hr-sidebar__block h3,
.hr-sidebar__block h4 {
  margin: 0 0 var(--hr-space-3);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
}

/* --- Beitrags- und Tourkarten ---------------------------------------------- */
.hr-cards {
  display: grid;
  gap: var(--hr-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .hr-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1064px) { .hr-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.hr-entry {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  overflow: hidden;
  transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.hr-entry:hover { border-color: var(--hr-border-strong); box-shadow: var(--hr-shadow-lg); }

.hr-entry__media { aspect-ratio: 16 / 9; background-color: var(--hr-surface-sunken); }
.hr-entry__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hr-entry__body { display: flex; flex-direction: column; gap: var(--hr-space-2); flex: 1; padding: var(--hr-space-4); }
.hr-entry__title { margin: 0; font-size: var(--hr-text-lg); }
.hr-entry__title a { color: var(--hr-dark); }
.hr-entry__title a:hover { color: var(--hr-primary); }
.hr-entry__meta { color: var(--hr-text-muted); font-size: var(--hr-text-xs); }
.hr-entry__text { margin: 0; color: var(--hr-text-muted); font-size: var(--hr-text-sm); }
.hr-entry__foot { margin-top: auto; padding-top: var(--hr-space-3); }

/* --- Seitennummerierung ----------------------------------------------------- */
.hr-pagination,
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2);
  justify-content: center;
  margin: var(--hr-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.hr-pagination li a,
.hr-pagination li span,
.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hr-tap);
  min-height: var(--hr-tap);
  padding-inline: var(--hr-space-3);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  color: var(--hr-dark);
  font-size: var(--hr-text-sm);
}
.hr-pagination li a:hover,
.pagination li a:hover { border-color: var(--hr-primary); color: var(--hr-primary); }
.hr-pagination .active span,
.pagination .active span,
.pagination li.active a {
  background-color: var(--hr-primary);
  border-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
}

/* --- Leerer Zustand --------------------------------------------------------- */
.hr-empty {
  padding: var(--hr-space-7) var(--hr-space-5);
  border: 1px dashed var(--hr-border-strong);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  color: var(--hr-text-muted);
  text-align: center;
}

/* --- Fehlerseiten ----------------------------------------------------------- */
.hr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-4);
  padding-block: var(--hr-space-8);
  text-align: center;
}
.hr-error__code {
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: var(--hr-weight-bold);
  line-height: 1;
  color: var(--hr-primary);
  letter-spacing: -0.03em;
}
.hr-error__text { max-width: 46ch; color: var(--hr-text-muted); }
.hr-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-3);
  justify-content: center;
}

/* ==========================================================================
   Das Alt-Markup der Inhaltsseiten

   Blog, Statikseiten und Touren benutzen alle denselben Satz Klassen aus dem
   uebernommenen Template. Sie werden hier einmal zentral umgelenkt, statt in
   fuenfzehn Views Markup zu tauschen.
   ========================================================================== */

/* --- Seitenkopf mit Wellenmuster -------------------------------------------- */
.flat-title-wrap {
  padding-block: var(--hr-space-6);
  text-align: center;
}
.flat-title-wrap h2 {
  margin: 0;
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-2xl);
}
.flat-title-wrap h2 span { color: inherit; }
/* Der dekorative Unterstrich des alten Designs. */
.flat-title-wrap .section-separator { display: none; }

/* --- Brotkrumen -------------------------------------------------------------- */
.breadcrumbs-fs {
  padding-block: var(--hr-space-3);
  background-color: var(--hr-dark);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hr-space-2);
  font-size: var(--hr-text-sm);
}
.breadcrumbs a,
.breadcrumbs span { color: rgba(255, 255, 255, 0.85); }
.breadcrumbs a:hover { color: #FFFFFF; text-decoration: underline; }
/* Das Alt-CSS haengt an jeden Link ein `::before` mit einer Font-Awesome-Glyphe,
   die es in der vorhandenen Fassung nicht gibt — sichtbar wurde davon nur ein
   Leerzeichen bzw. ein Ersatzzeichen. Das Trennzeichen setzen wir selbst. */
.breadcrumbs a::before { content: none; }
.breadcrumbs a + a::before,
.breadcrumbs a + span::before { content: '›'; margin-right: var(--hr-space-2); opacity: 0.6; }

/* --- Flaechen ---------------------------------------------------------------
   `grey-blue-bg` ist ein blasses Blaugrau aus dem alten Design und passt nicht
   zur Sandfarbe der uebrigen Seiten. */
.grey-blue-bg { background-color: var(--hr-bg); }
.pt-30 { padding-top: var(--hr-space-6); }
.middle-padding { padding-block: var(--hr-space-5); }
.limit-box { display: none; }

/* --- Beitragsliste ----------------------------------------------------------- */
.post-container { padding-bottom: var(--hr-space-5); }
.post-article { margin-bottom: var(--hr-space-6); }
.post-article .list-single-main-media {
  margin-bottom: 0;
  border-radius: var(--hr-radius-lg) var(--hr-radius-lg) 0 0;
  overflow: hidden;
}
.post-article .list-single-main-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* Liegt ein Bild darueber, schliesst der Textblock buendig an. */
.post-article .list-single-main-media + .list-single-main-item {
  border-top: 0;
  border-radius: 0 0 var(--hr-radius-lg) var(--hr-radius-lg);
}
.post-article .list-single-main-item-title h3 { border-bottom: 0; padding-bottom: 0; }
.post-article .list-single-main-item-title h3 a { color: var(--hr-dark); }
.post-article .list-single-main-item-title h3 a:hover { color: var(--hr-primary); }
.post-article .overview { color: var(--hr-text-muted); font-size: var(--hr-text-sm); }

.post-opt ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2) var(--hr-space-5);
  margin: var(--hr-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.post-opt li { color: var(--hr-text-muted); font-size: var(--hr-text-xs); }
.post-opt li i { color: var(--hr-primary); margin-right: var(--hr-space-1); }

.fw-separator {
  display: block;
  height: 1px;
  margin-block: var(--hr-space-4);
  background-color: var(--hr-border);
}

/* Stichworte */
.list-single-tags,
.tags-stylwrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2);
}
.list-single-tags a,
.tags-stylwrap a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--hr-space-1) var(--hr-space-3);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-surface-sunken);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
}
.list-single-tags a:hover,
.tags-stylwrap a:hover {
  border-color: var(--hr-primary);
  background-color: var(--hr-primary-soft);
  color: var(--hr-primary);
}

/* --- Knopf des Alt-Markups ---------------------------------------------------
   `.btn.float-btn.color-bg` ist DER Knopf dieser Seiten (Weiterlesen, Absenden,
   Details). Er stand im alten Markengruen und wurde von legacy-colors.css nur
   farblich umgelenkt — Form und Groesse blieben. */
.btn.float-btn,
a.btn.color-bg,
.btn.color-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-2);
  min-height: var(--hr-tap);
  padding: var(--hr-space-3) var(--hr-space-5);
  border: 0;
  border-radius: var(--hr-radius);
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  font-family: var(--hr-font-sans);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
  text-align: center;
  cursor: pointer;
}
.btn.float-btn:hover,
a.btn.color-bg:hover,
.btn.color-bg:hover { background-color: var(--hr-primary-hover); color: var(--hr-text-on-dark); }
/* Das Pfeil-Icon sass als eigener, hellerer Kasten am rechten Rand. */
.btn.float-btn i,
.btn.color-bg i {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  line-height: 1;
}

/* --- Seitenleiste (Widgets) --------------------------------------------------- */
.fixed-bar { position: static; }

.box-widget-item { margin-bottom: var(--hr-space-5); }
.box-widget {
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  overflow: hidden;
}
.box-widget-content { padding: var(--hr-space-4); }

/* 🐞 Dasselbe verirrte Zeichen wie auf der Detailseite: `::before` mit einer
   Font-Awesome-Glyphe, die es in der vorhandenen Fassung nicht gibt. Der
   Browser zeichnete dafuer ein tuerkises "▽" neben jede Widget-Ueberschrift. */
.box-widget-item-header::before { content: none; }
.box-widget-item-header h3,
.box-widget-item-header h4 {
  margin: 0 0 var(--hr-space-3);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
  text-transform: none;
}

/* Suchfeld im Widget */
.search-widget form { display: flex; gap: var(--hr-space-2); }
.search-widget input.search {
  flex: 1;
  min-width: 0;
  min-height: var(--hr-tap);
  margin: 0;
  padding: var(--hr-space-2) var(--hr-space-3);
  border: 1px solid var(--hr-border-strong);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  /* 16px, damit iOS beim Fokus nicht in die Seite zoomt. */
  font-size: var(--hr-text-base);
}
.search-widget input.search:focus { outline: none; border-color: var(--hr-primary); box-shadow: var(--hr-focus-ring); }
.search-widget .search-submit {
  position: static;
  flex: none;
  width: var(--hr-tap);
  height: var(--hr-tap);
  border: 0;
  border-radius: var(--hr-radius);
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  cursor: pointer;
}
.search-widget .search-submit:hover { background-color: var(--hr-primary-hover); }

/* Beitragsvorschau im Widget */
.box-image-widget {
  display: flex;
  gap: var(--hr-space-3);
  padding-block: var(--hr-space-3);
}
.box-image-widget + .box-image-widget { border-top: 1px solid var(--hr-border); }
.box-image-widget-media {
  position: relative;
  flex: none;
  width: 84px;
  border-radius: var(--hr-radius-sm);
  overflow: hidden;
}
.box-image-widget-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Die Beschriftung lag als voller Balken ueber dem kleinen Vorschaubild und
   verdeckte es fast ganz. Sie ist nur fuer die Maus gedacht. */
.box-image-widget-media a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: rgba(10, 61, 46, 0.75);
  color: var(--hr-text-on-dark);
  font-size: 0;
  opacity: 0;
  transition: opacity var(--hr-transition);
}
.box-image-widget-media a::after {
  content: '＋';
  font-size: 1.25rem;
  line-height: 1;
}
.box-image-widget-media:hover a { opacity: 1; }
.box-image-widget-details h4 { margin: 0 0 var(--hr-space-1); font-size: var(--hr-text-sm); }
.box-image-widget-details p { margin: 0; color: var(--hr-text-muted); font-size: var(--hr-text-xs); }

/* Seitenmenue der Statikseiten */
.page_menu ul,
.faq-nav ul { margin: 0; padding: 0; list-style: none; }
.page_menu li a,
.faq-nav li a {
  display: flex;
  align-items: center;
  min-height: var(--hr-tap);
  padding: var(--hr-space-2) var(--hr-space-3);
  border-radius: var(--hr-radius-sm);
  color: var(--hr-text);
  font-size: var(--hr-text-sm);
}
.page_menu li a:hover,
.faq-nav li a:hover { background-color: var(--hr-surface-sunken); color: var(--hr-primary); }

/* --- Preisschild der Touren --------------------------------------------------- */
.price_tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--hr-space-1);
  padding: var(--hr-space-1) var(--hr-space-3);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-primary-soft);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-bold);
  white-space: nowrap;
}

/* --- Tabellen (Buchungsuebersicht im Konto) --------------------------------- */
.hr-table-wrap { width: 100%; overflow-x: auto; }
.hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hr-text-sm);
}
.hr-table th,
.hr-table td {
  padding: var(--hr-space-3) var(--hr-space-4);
  border-bottom: 1px solid var(--hr-border);
  text-align: left;
  vertical-align: top;
}
.hr-table th {
  background-color: var(--hr-surface-sunken);
  color: var(--hr-dark);
  font-weight: var(--hr-weight-semibold);
  white-space: nowrap;
}
.hr-table tr:last-child td { border-bottom: 0; }