/* ===========================================================================
   SEO-Landingpages (Task 17)

   Geladen fuer die Route `landingpage`. Alle Klassen tragen den Praefix `hr-`
   und benutzen ausschliesslich die Tokens aus tokens.css - keine festen Farben
   und keine eigenen Schriftgroessen.

   HINWEIS: Wer hier etwas aendert, erhoeht `$hrCss` in
   resources/views/layouts/app.blade.php. Sonst liefert der Browser weiter die
   alte Fassung aus dem Cache (das ist in Task 14 zweimal passiert).
   =========================================================================== */

.hr-lp {
  background-color: var(--hr-bg);
  /* Das Alt-CSS zentriert den gesamten Inhaltsbereich - gemessen kam an jedem
     Absatz `text-align: center` an. Fliesstext liest sich zentriert schlecht,
     deshalb hier zurueckgesetzt. Der Aufruf zur Suche zentriert sich weiter
     unten wieder gezielt selbst. */
  text-align: left;
}

/* --- Kopfbereich ---------------------------------------------------------- */

.hr-lp__hero {
  position: relative;
  padding-block: var(--hr-space-8);
  background-color: var(--hr-dark);
  background-size: cover;
  background-position: center;
  color: var(--hr-text-on-dark);
}

/* Ohne Foto: ruhige Flaeche statt eines Bildes, das nicht zum Thema passt.
   Im Bestand liegen nur Reisezielbilder - eine falsche Zuordnung ist hier
   schon einmal passiert (Task 14: Rom als Katar). */
.hr-lp__hero--schlicht {
  background-image: linear-gradient(135deg, var(--hr-dark) 0%, var(--hr-primary) 100%);
}

/* Abdunkeln, damit der Text auf jedem Foto lesbar bleibt. Nur wenn ein Bild
   gesetzt ist - auf der schlichten Variante wuerde es den Verlauf truebe machen. */
.hr-lp__hero:not(.hr-lp__hero--schlicht)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(10, 61, 46, 0.68);
}

.hr-lp__hero > .hr-container {
  position: relative;   /* ueber der Abdunklung */
}

.hr-lp__title {
  margin: 0 0 var(--hr-space-3);
  max-width: 22ch;
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-3xl);
  font-weight: var(--hr-weight-bold);
  line-height: var(--hr-leading-tight);
  letter-spacing: -0.02em;
}

.hr-lp__intro {
  margin: 0 0 var(--hr-space-5);
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--hr-text-lg);
  line-height: var(--hr-leading);
}

/* --- Aufruf zur Suche ----------------------------------------------------- */

.hr-lp__cta {
  display: inline-block;
  padding: var(--hr-space-3) var(--hr-space-5);
  border-radius: var(--hr-radius);
  background-color: var(--hr-accent);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
  text-decoration: none;
  transition: var(--hr-transition);
  min-height: var(--hr-tap);
}

.hr-lp__cta:hover,
.hr-lp__cta:focus-visible {
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  text-decoration: none;
}

.hr-lp__cta:focus-visible {
  outline: var(--hr-focus-ring);
  outline-offset: 3px;
}

/* Der zweite Aufruf steht mitten im Text und braucht Luft ringsum. */
.hr-lp__cta-block {
  text-align: center;
  padding-block: var(--hr-space-6);
  border-block: 1px solid var(--hr-border);
}

/* --- Fliesstext ----------------------------------------------------------- */

.hr-lp__body {
  padding-block: var(--hr-space-7);
}

.hr-lp__section + .hr-lp__section {
  margin-top: var(--hr-space-7);
}

.hr-lp__section h2 {
  margin: 0 0 var(--hr-space-4);
  max-width: 30ch;
  color: var(--hr-dark);
  font-size: var(--hr-text-2xl);
  font-weight: var(--hr-weight-semibold);
  line-height: var(--hr-leading-snug);
}

.hr-lp__section p {
  /* 68 Zeichen je Zeile - laengere Zeilen liest niemand gern. */
  max-width: 68ch;
  margin: 0 0 var(--hr-space-4);
  color: var(--hr-text);
  font-size: var(--hr-text-base);
  line-height: var(--hr-leading);
}

.hr-lp__section p:last-child {
  margin-bottom: 0;
}

/* --- Haeufige Fragen ------------------------------------------------------ */

.hr-lp__faq-item {
  max-width: 68ch;
  border-bottom: 1px solid var(--hr-border);
}

.hr-lp__faq-item summary {
  padding: var(--hr-space-4) var(--hr-space-6) var(--hr-space-4) 0;
  position: relative;
  cursor: pointer;
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
  line-height: var(--hr-leading-snug);
  list-style: none;
}

/* Das Standarddreieck weg - wir zeichnen ein eigenes Zeichen rechts. */
.hr-lp__faq-item summary::-webkit-details-marker { display: none; }

.hr-lp__faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hr-primary);
  font-size: var(--hr-text-xl);
  font-weight: var(--hr-weight-normal);
  line-height: 1;
}

.hr-lp__faq-item[open] summary::after {
  content: "\2212";   /* Minuszeichen */
}

.hr-lp__faq-item summary:focus-visible {
  outline: var(--hr-focus-ring);
  outline-offset: 2px;
}

.hr-lp__faq-item p {
  margin: 0 0 var(--hr-space-4);
  color: var(--hr-text-muted);
}

/* --- Verwandte Seiten ----------------------------------------------------- */

.hr-lp__related {
  display: grid;
  gap: var(--hr-space-4);
  grid-template-columns: 1fr;
}

.hr-lp__related-item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  color: var(--hr-dark);
  text-decoration: none;
  transition: var(--hr-transition);
}

.hr-lp__related-item:hover,
.hr-lp__related-item:focus-visible {
  border-color: var(--hr-primary);
  box-shadow: var(--hr-shadow);
  text-decoration: none;
}

.hr-lp__related-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--hr-surface-sunken);
}

.hr-lp__related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hr-lp__related-title {
  display: block;
  padding: var(--hr-space-4);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
  line-height: var(--hr-leading-snug);
}

/* --- Breiter -------------------------------------------------------------- */

@media (min-width: 768px) {
  .hr-lp__hero {
    padding-block: calc(var(--hr-space-8) * 1.5);
  }

  .hr-lp__related {
    grid-template-columns: repeat(3, 1fr);
  }
}