/* ==========================================================================
   halal-reisen — Rahmen: Kopfzeile, Sprachwahl, Fusszeile
   ========================================================================== */

/* --- Kopfzeile -------------------------------------------------------------
   Eine Kopfzeile fuer ALLE Breiten. Bisher gab es zwei getrennte (`.main-header`
   fuer Desktop, `.mobile_menu` fuer Mobil), die unterschiedliche Inhalte und
   sogar unterschiedliche Sprachstaende hatten.
   -------------------------------------------------------------------------- */
.hr-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: var(--hr-surface);
  border-bottom: 1px solid var(--hr-border);
}

.hr-header__inner {
  display: flex;
  align-items: center;
  gap: var(--hr-space-4);
  min-height: 64px;
  padding-block: var(--hr-space-2);
}
@media (min-width: 1064px) {
  .hr-header__inner { min-height: 76px; }
}

/* --- Logo ------------------------------------------------------------------ */
.hr-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  margin-right: auto;
  min-width: 0;                 /* erlaubt Schrumpfen auf schmalen Geraeten */
}
.hr-header__brand img {
  height: 36px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .hr-header__brand img { height: 44px; }
}
.hr-header__brand-sub {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-medium);
  white-space: nowrap;
}
/* Auf sehr schmalen Geraeten weicht der Zusatz "Reisebuero", damit das Logo
   und die Telefonnummer nicht gequetscht werden. */
@media (max-width: 479px) {
  .hr-header__brand-sub { display: none; }
}

/* --- Navigation ------------------------------------------------------------ */
.hr-nav { display: none; }
@media (min-width: 1064px) {
  .hr-nav { display: block; }
}
.hr-nav__list {
  display: flex;
  align-items: center;
  gap: var(--hr-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hr-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hr-tap);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-medium);
}
.hr-nav__link:hover { color: var(--hr-primary); }
.hr-nav__link[aria-current="page"] {
  color: var(--hr-primary);
  box-shadow: inset 0 -2px 0 var(--hr-primary);
}

/* --- Sprachwahl ------------------------------------------------------------
   Die Flaggen liegen jetzt LOKAL unter frontend/images/flags/. Vorher wurden
   sie von milknroll.com geholt — einer fremden, unbeteiligten WordPress-Seite.
   -------------------------------------------------------------------------- */
.hr-lang { position: relative; }

.hr-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  min-height: var(--hr-tap);
  padding: var(--hr-space-2) 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-family: var(--hr-font-sans);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-medium);
  cursor: pointer;
}
.hr-lang__toggle:hover { border-color: var(--hr-border-strong); }
.hr-lang__toggle:focus-visible { outline: none; box-shadow: var(--hr-focus-ring); }

.hr-lang__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  flex: none;
}
.hr-lang__name { display: none; }
@media (min-width: 768px) {
  .hr-lang__name { display: inline; }
}

.hr-lang__menu {
  position: absolute;
  top: calc(100% + var(--hr-space-2));
  right: 0;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: var(--hr-space-2);
  list-style: none;
  background-color: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  box-shadow: var(--hr-shadow-lg);
}
.hr-lang__menu[hidden] { display: none; }

.hr-lang__item {
  display: flex;
  align-items: center;
  gap: var(--hr-space-3);
  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);
}
.hr-lang__item:hover { background-color: var(--hr-surface-sunken); color: var(--hr-text); }
.hr-lang__item[aria-current="true"] {
  background-color: var(--hr-primary-soft);
  color: var(--hr-primary);
  font-weight: var(--hr-weight-semibold);
}

/* --- Telefon --------------------------------------------------------------- */
.hr-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  min-height: var(--hr-tap);
  padding: var(--hr-space-2) var(--hr-space-4);
  border: 1px solid var(--hr-primary);
  border-radius: var(--hr-radius-full);
  color: var(--hr-primary);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-semibold);
  white-space: nowrap;
}
.hr-header__phone:hover {
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
}
/* Bis Tablet nur das Hoerersymbol — die Nummer braucht sonst zu viel Platz. */
.hr-header__phone-text { display: none; }
@media (min-width: 768px) {
  .hr-header__phone-text { display: inline; }
}
@media (max-width: 767px) {
  .hr-header__phone { padding-inline: var(--hr-space-3); }
}

/* --- Menue-Schalter (unter 1064px) ----------------------------------------- */
.hr-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hr-tap);
  height: var(--hr-tap);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  color: var(--hr-dark);
  font-size: 1.125rem;
  cursor: pointer;
}
.hr-menu-toggle:hover { border-color: var(--hr-border-strong); }
.hr-menu-toggle:focus-visible { outline: none; box-shadow: var(--hr-focus-ring); }
@media (min-width: 1064px) {
  .hr-menu-toggle { display: none; }
}

/* --- Mobiles Menue ---------------------------------------------------------
   Eigenes Panel statt der mmenu-Bibliothek: weniger Fremdcode, gleiche Optik
   wie der Rest, und es kennt dieselben (uebersetzten) Menuepunkte.
   -------------------------------------------------------------------------- */
.hr-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.hr-mobile-nav.is-open { display: block; }

.hr-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 61, 46, 0.45);
}

.hr-mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(320px, 86vw);
  padding: var(--hr-space-5) var(--hr-space-4);
  background-color: var(--hr-surface);
  box-shadow: var(--hr-shadow-lg);
  overflow-y: auto;
}

.hr-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hr-space-4);
  margin-bottom: var(--hr-space-5);
  padding-bottom: var(--hr-space-4);
  border-bottom: 1px solid var(--hr-border);
}
.hr-mobile-nav__title {
  margin: 0;
  font-size: var(--hr-text-lg);
  color: var(--hr-dark);
}

.hr-mobile-nav__list {
  margin: 0 0 var(--hr-space-5);
  padding: 0;
  list-style: none;
}
.hr-mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--hr-space-3);
  min-height: var(--hr-tap);
  padding: var(--hr-space-3) var(--hr-space-2);
  border-radius: var(--hr-radius-sm);
  color: var(--hr-text);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-medium);
}
.hr-mobile-nav__link:hover { background-color: var(--hr-surface-sunken); }

.hr-mobile-nav__section-title {
  margin: 0 0 var(--hr-space-2);
  padding-inline: var(--hr-space-2);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Sperrt das Scrollen der Seite, solange das Menue offen ist. */
body.hr-no-scroll { overflow: hidden; }

/* --- Altlast neutralisieren: der schwebende #wrapper ------------------------
   style.css setzt `#wrapper { float: left; }` samt fester Breite — ein Relikt
   aus der Float-Ära. Das hatte zwei Folgen: Der Inhalt lag nicht mehr im
   normalen Textfluss (die Fusszeile rutschte darunter nach oben), und die
   berechnete Breite (gemessen 2124px bei 1568px Fenster) liess die Seite
   seitlich ueberlaufen. Beides wird hier abgeraeumt.
   -------------------------------------------------------------------------- */
#wrapper {
  float: none;
  width: 100%;
  max-width: 100%;
}

/* --- Fusszeile -------------------------------------------------------------- */
.hr-footer {
  clear: both;               /* falls anderswo noch etwas schwebt */
  margin-top: var(--hr-section-y);
  background-color: var(--hr-dark);
  color: rgba(255, 255, 255, 0.82);
}
.hr-footer a { color: rgba(255, 255, 255, 0.82); }
.hr-footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* Auf schmalen Geraeten stand die Fusszeile als eine lange Spalte: drei Bloecke
   untereinander, jeder mit 48px Innenabstand und 32px Zwischenraum — gemessen
   ueber 500px Hoehe, die der Nutzer komplett durchscrollen musste, um zum Ende
   der Seite zu kommen. Seit Task 14 stehen "Service" und "Rechtliches"
   NEBENeinander, der Ueber-uns-Text darueber ueber die volle Breite. Kein
   Inhalt entfaellt — die Rechtslinks bleiben erreichbar (Impressumspflicht). */
.hr-footer__main {
  display: grid;
  gap: var(--hr-space-5);
  padding-block: var(--hr-space-5);
  grid-template-columns: repeat(2, 1fr);
  /* Das alte Stylesheet zentriert im Fussbereich — linksbuendig liest sich
     besser und haelt die Spalten optisch zusammen. */
  text-align: left;
}
.hr-footer__main > * { text-align: left; }
.hr-footer__main > :first-child { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .hr-footer__main {
    gap: var(--hr-space-6);
    padding-block: var(--hr-space-7);
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .hr-footer__main > :first-child { grid-column: auto; }
}

.hr-footer__title {
  margin: 0 0 var(--hr-space-3);
  color: #FFFFFF;
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hr-footer__list { margin: 0; padding: 0; list-style: none; }
.hr-footer__list li + li { margin-top: var(--hr-space-2); }
.hr-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--hr-text-sm);
}

.hr-footer__text {
  margin: 0;
  font-size: var(--hr-text-sm);
  line-height: var(--hr-leading);
  max-width: 46ch;
}

.hr-footer__bottom {
  padding-block: var(--hr-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hr-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hr-space-3);
  font-size: var(--hr-text-sm);
}

/* --- Nach oben ------------------------------------------------------------- */
.hr-to-top {
  position: fixed;
  right: var(--hr-space-4);
  bottom: var(--hr-space-4);
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--hr-tap);
  height: var(--hr-tap);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-surface);
  color: var(--hr-dark);
  box-shadow: var(--hr-shadow);
  cursor: pointer;
}
.hr-to-top.is-visible { display: inline-flex; }
.hr-to-top:hover { background-color: var(--hr-primary); color: var(--hr-text-on-dark); }