/* ==========================================================================
   halal-reisen — Bausteine: Buttons, Formularfelder, Karten, Badges, Chips
   Alle Klassen mit Praefix `hr-`.
   ========================================================================== */

/* --- Buttons --------------------------------------------------------------
   Mindesthoehe = --hr-tap (44px), damit sie auf dem Smartphone sicher
   getroffen werden (WCAG 2.5.5).
   -------------------------------------------------------------------------- */
.hr-btn {
  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: 1px solid transparent;
  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);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hr-transition),
              border-color var(--hr-transition),
              color var(--hr-transition);
}
.hr-btn:hover  { background-color: var(--hr-primary-hover); color: var(--hr-text-on-dark); }
.hr-btn:active { background-color: var(--hr-primary-active); }
.hr-btn:focus-visible { outline: none; box-shadow: var(--hr-focus-ring); }
.hr-btn[disabled],
.hr-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.hr-btn--secondary {
  background-color: var(--hr-surface);
  border-color: var(--hr-border-strong);
  color: var(--hr-dark);
}
.hr-btn--secondary:hover {
  background-color: var(--hr-surface-sunken);
  border-color: var(--hr-primary);
  color: var(--hr-primary);
}

.hr-btn--ghost {
  background-color: transparent;
  color: var(--hr-primary);
}
.hr-btn--ghost:hover {
  background-color: var(--hr-primary-soft);
  color: var(--hr-primary-hover);
}

.hr-btn--block { width: 100%; }
.hr-btn--sm { min-height: 36px; padding: var(--hr-space-2) var(--hr-space-4); font-size: var(--hr-text-sm); }
.hr-btn--lg { min-height: 52px; padding: var(--hr-space-4) var(--hr-space-6); font-size: var(--hr-text-lg); }

/* --- Formularfelder -------------------------------------------------------
   Schriftgroesse mindestens 16px: iOS zoomt sonst beim Fokus automatisch in
   die Seite hinein und zerstoert das Layout.
   -------------------------------------------------------------------------- */
.hr-field { display: block; margin-bottom: var(--hr-space-4); }

.hr-label {
  display: block;
  margin-bottom: var(--hr-space-2);
  color: var(--hr-text);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-medium);
}

.hr-input,
.hr-select,
.hr-textarea {
  display: block;
  width: 100%;
  min-height: var(--hr-tap);
  padding: var(--hr-space-3) var(--hr-space-4);
  border: 1px solid var(--hr-border-strong);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  color: var(--hr-text);
  font-family: var(--hr-font-sans);
  font-size: var(--hr-text-base);
  line-height: 1.4;
  transition: border-color var(--hr-transition), box-shadow var(--hr-transition);
}
.hr-input::placeholder,
.hr-textarea::placeholder { color: var(--hr-text-subtle); }

.hr-input:focus,
.hr-select:focus,
.hr-textarea:focus {
  outline: none;
  border-color: var(--hr-primary);
  box-shadow: var(--hr-focus-ring);
}

.hr-textarea { min-height: 120px; resize: vertical; }

.hr-select {
  /* Eigener Pfeil, damit das Feld auf allen Systemen gleich aussieht. */
  appearance: none;
  padding-right: var(--hr-space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B584F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--hr-space-4) center;
}

.hr-field--error .hr-input,
.hr-field--error .hr-select,
.hr-field--error .hr-textarea { border-color: var(--hr-danger); }

.hr-field-error {
  margin-top: var(--hr-space-2);
  color: var(--hr-danger);
  font-size: var(--hr-text-sm);
}

.hr-field-hint {
  margin-top: var(--hr-space-2);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
}

/* --- Karten --------------------------------------------------------------- */
.hr-card {
  background-color: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.hr-card--hover:hover {
  border-color: var(--hr-border-strong);
  box-shadow: var(--hr-shadow-lg);
}
.hr-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--hr-surface-sunken);
}
.hr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-card__body { padding: var(--hr-space-4); }
.hr-card__title {
  margin: 0 0 var(--hr-space-1);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-semibold);
  color: var(--hr-dark);
}
.hr-card__meta {
  margin: 0;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
}

/* --- Badges ---------------------------------------------------------------
   Gold ist eine FLAECHEN-Farbe: dunkler Text darauf (9,18:1). Goldener Text
   auf hellem Grund waere mit 1,9:1 unlesbar.
   -------------------------------------------------------------------------- */
.hr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-1);
  padding: var(--hr-space-1) var(--hr-space-3);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-accent);
  color: var(--hr-text);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.hr-badge--dark    { background-color: var(--hr-dark);    color: var(--hr-text-on-dark); }
.hr-badge--primary { background-color: var(--hr-primary); color: var(--hr-text-on-dark); }
.hr-badge--quiet   { background-color: var(--hr-surface-sunken); color: var(--hr-text-muted); }

/* --- Chips (Halal-Merkmale, Filter-Kuerzel) -------------------------------- */
.hr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-1);
  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-primary-soft);
  color: var(--hr-dark);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-medium);
  line-height: 1.5;
}
.hr-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Preis ----------------------------------------------------------------- */
.hr-price {
  color: var(--hr-dark);
  font-size: var(--hr-text-xl);
  font-weight: var(--hr-weight-bold);
  line-height: 1.1;
  white-space: nowrap;
}
.hr-price__note {
  display: block;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-normal);
}

/* --- Hinweisboxen ---------------------------------------------------------- */
.hr-note {
  padding: var(--hr-space-4);
  border: 1px solid var(--hr-border);
  border-left: 4px solid var(--hr-primary);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  font-size: var(--hr-text-sm);
}
.hr-note--error {
  border-left-color: var(--hr-danger);
  background-color: var(--hr-danger-soft);
}

/* --- Abschnittsueberschriften ---------------------------------------------
   `.section-title` und `.main_title*` stammen aus dem alten Stylesheet und
   werden auf mehreren Seiten verwendet. Sie standen in Blau (#18458b) und in
   Grossbuchstaben — beides passt nicht mehr zur Farbwelt und wirkte laut.
   -------------------------------------------------------------------------- */
.section-title,
.main_title,
.main_title_2 { margin-bottom: var(--hr-space-6); }

.section-title h2,
.main_title h2,
.main_title_2 h2 {
  margin-bottom: var(--hr-space-2);
  color: var(--hr-dark);
  font-family: var(--hr-font-sans);
  font-size: var(--hr-text-2xl);
  font-weight: var(--hr-weight-semibold);
  letter-spacing: -0.01em;
  text-transform: none;
}

.section-title p,
.main_title p,
.main_title_2 p {
  margin: 0;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-base);
}

/* Der dekorative Unterstrich des alten Designs entfaellt. */
.section-title .section-separator,
.main_title .section-separator { display: none; }

/* --- Themenkarten ("Ideen für Halal-Reisen", Umrah-Seite) -------------------
   NEU IN TASK 14. Bild oben im festen 16:9, Titel und ein Satz darunter.

   Warum nicht mehr Text auf dem Foto (so war es bis Task 13):
     * 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 —
       daher die grossen Luecken.
     * Weisser Text auf hellen Fotos brauchte eine dunkle Verlaufsabdeckung, die
       das Bild wieder verdeckte.
   Text unter dem Bild ist unabhaengig vom Motiv lesbar, und die Karten sind von
   sich aus gleich hoch.
   -------------------------------------------------------------------------- */
.hr-ideas { padding-block: var(--hr-section-y); }

.hr-ideas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hr-space-4);
}
@media (min-width: 768px) {
  .hr-ideas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1064px) {
  /* Vier Spalten: die acht Karten der Startseite fuellen damit genau zwei
     Reihen — keine angebrochene letzte Zeile. */
  .hr-ideas__grid { grid-template-columns: repeat(4, 1fr); gap: var(--hr-space-5); }
  /* Zwei Karten wuerden bei vier Spalten die Haelfte der Zeile leer lassen. */
  .hr-ideas__grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.hr-idea {
  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;
  color: var(--hr-text);
  transition: box-shadow var(--hr-transition),
              border-color var(--hr-transition),
              transform var(--hr-transition);
}
.hr-idea:hover {
  border-color: var(--hr-border-strong);
  box-shadow: var(--hr-shadow-lg);
  color: var(--hr-text);
  transform: translateY(-2px);
}
.hr-idea:focus-visible { outline: 2px solid var(--hr-primary); outline-offset: 2px; }

.hr-idea__media {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--hr-surface-sunken);
  overflow: hidden;
}
.hr-idea__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.hr-idea:hover .hr-idea__media img { transform: scale(1.04); }

.hr-idea__body {
  display: flex;
  flex-direction: column;
  gap: var(--hr-space-1);
  /* `flex: 1` haelt die Textflaechen gleich hoch, auch wenn ein Satz laenger
     ist als der andere. */
  flex: 1;
  padding: var(--hr-space-4);
  text-align: left;
}
.hr-idea__title {
  color: var(--hr-dark);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-semibold);
  line-height: var(--hr-leading-tight);
}
.hr-idea__text {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  line-height: var(--hr-leading-snug);
}

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