/* ==========================================================================
   Hilfebereich /hilfe
   --------------------------------------------------------------------------
   Wird vom Plugin nur auf der Hilfe-Seite und ihren Unterseiten geladen
   (LetheAt\Help\Assets). Alle Regeln hängen an Klassen mit dem Präfix
   „hilfe“ – Referenz: content/hilfe/README.md → „CSS-Klassen“.

   Selektoren mit Links beginnen mit .hilfe, damit sie stärker sind als die
   globalen Linkfarben von Elementor (.elementor-kit-N a).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Stellschrauben
   -------------------------------------------------------------------------- */

.hilfe {
  /* LETHE-AT Farbpalette (Color Sheet) */
  --lethe-blue:       #00719f;
  --lethe-navy:       #002f42;
  --lethe-cyan:       #00afd0;
  --lethe-light-cyan: #7adcf0;
  --lethe-red:        #e80830;
  --lethe-pink:       #ffabd9;

  /* Rollen – hier umstellen, nicht in den Regeln unten.
     Kontrast auf Weiß: blue 5,4:1 und navy 13:1 (für Text geeignet),
     cyan 2,5:1 (nur dekorativ). red und pink derzeit nicht verwendet. */
  --hilfe-accent:          var(--lethe-blue);   /* Links, Button, Fokus */
  --hilfe-accent-strong:   var(--lethe-navy);   /* Hover */
  --hilfe-accent-contrast: #ffffff;             /* Text auf Button */
  --hilfe-ink:             var(--lethe-navy);   /* Karten- und Fragentitel */
  --hilfe-highlight:       var(--lethe-cyan);   /* Pfeile der FAQ-Akkordeons */
  --hilfe-border:          #caf1f9;             /* light-cyan 40 % auf Weiß: Trennlinien */
  --hilfe-input-border:    #b9c4ca;             /* Suchfeld und Trefferliste (3:1 für Bedienelemente) */
  --hilfe-active:          #ebfafd;             /* markierter Suchtreffer */

  --hilfe-radius:          8px;
  --hilfe-gap:             1.5rem;
  --hilfe-header-offset:   0px;   /* Höhe eines fixierten Seitenkopfs, falls vorhanden */
}


/* ==========================================================================
   1. LAYOUT
   ========================================================================== */

/* Sprunglinks: weich scrollen, Ziel nicht unter einem fixierten Kopf verstecken */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.hilfe-question__title[id],
.hilfe-accordion__item[id] {
  scroll-margin-top: calc(var(--hilfe-header-offset) + 1.5rem);
}

/* Hub: Themen-Karten und FAQ-Fragen als Raster –
   1 Spalte am Handy, 2 am Tablet, 3 am Desktop */
.hilfe .hilfe-cards,
.hilfe .hilfe-faq-teaser {
  display: grid;
  gap: calc(var(--hilfe-gap) * 1.25) var(--hilfe-gap);
  grid-template-columns: 1fr;
  margin: var(--hilfe-gap) 0 0;
}
.hilfe .hilfe-faq-teaser {
  gap: var(--hilfe-gap);
  list-style: none;
  padding: 0;
}
@media (min-width: 600px) {
  .hilfe .hilfe-cards,
  .hilfe .hilfe-faq-teaser { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .hilfe .hilfe-cards,
  .hilfe .hilfe-faq-teaser { grid-template-columns: repeat(3, 1fr); }
}

/* Themenseiten: Inhaltsverzeichnis links, Fragen rechts.
   Unter 768px (Elementor-Mobil) untereinander, Verzeichnis oben. */
.hilfe__layout {
  display: flex;
  flex-direction: column;
  gap: calc(var(--hilfe-gap) * 1.5);
  margin-top: var(--hilfe-gap);
}
@media (min-width: 768px) {
  .hilfe__layout {
    flex-direction: row;
    align-items: flex-start;   /* nötig, damit sticky greift */
    gap: calc(var(--hilfe-gap) * 2);
  }
  .hilfe-toc {
    flex: 0 0 30%;
    position: sticky;          /* bleibt beim Scrollen stehen */
    top: calc(var(--hilfe-header-offset) + 1.5rem);
  }
  .hilfe__content {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* ==========================================================================
   2. GESTALTUNG
   ========================================================================== */

/* Allgemein ---------------------------------------------------------------- */

/* Schrift (Familie, Größen) kommt vom Theme bzw. von Elementor – hier
   bewusst keine font-family und keine font-size. */

.hilfe a.hilfe-button {
  display: inline-block;
  padding: .75em 1.5em;
  border-radius: var(--hilfe-radius);
  background: var(--hilfe-accent);
  color: var(--hilfe-accent-contrast);
  font-weight: 600;
  text-decoration: none;
}
.hilfe a.hilfe-button:hover,
.hilfe a.hilfe-button:focus-visible {
  background: var(--hilfe-accent-strong);
  color: var(--hilfe-accent-contrast);
}

.hilfe a:focus-visible,
.hilfe summary:focus-visible {
  outline: 2px solid var(--hilfe-accent);
  outline-offset: 2px;
}

.hilfe__contact-hint {
  margin-top: calc(var(--hilfe-gap) * 2);
}

/* Hub ---------------------------------------------------------------------- */

/* Abstände auf dem Hub vollständig selbst gesetzt. Die .hilfe-Präfixe sind
   nötig: Theme und Elementor-Kit setzen eigene Ränder an h2/h3/p
   (.elementor-kit-N h2 …), die sonst gewinnen und die Abschnitte
   ungleichmäßig auseinanderziehen. */
.hilfe .hilfe__section {
  margin: calc(var(--hilfe-gap) * 2.5) 0 0;
}
.hilfe .hilfe__section-title {
  margin: 0 0 .25rem;
}
.hilfe .hilfe__section-lead {
  margin: 0;
}

/* Karten: schlicht, nur Titel und Kurztext im Raster – kein Rahmen,
   kein Hintergrund, kein Schatten, kein Hover-Effekt */
.hilfe-card {
  position: relative;
}
/* Titel wie „Projektziele“ auf lethe.at: Großbuchstaben in LETHE-Blau */
.hilfe .hilfe-card__title {
  margin: 0 0 .25rem;
  color: var(--hilfe-accent);
  text-transform: uppercase;
}
/* :hover explizit, damit die Hover-Linkfarbe von Elementor nicht greift */
.hilfe .hilfe-card__title a,
.hilfe .hilfe-card__title a:hover {
  color: inherit;
  text-decoration: none;
}
/* Ganze Karte klickbar: der Titel-Link wird über die Karte gelegt */
.hilfe .hilfe-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hilfe .hilfe-card__text {
  margin: 0;
}

/* Icon pro Thema – Beispiel:
.hilfe-card--allgemeines .hilfe-card__title::before { content: "…"; margin-right: .5em; }
   Verfügbare Modifier: --allgemeines, --ablauf-organisation, --verguetung-vorteile,
   --sicherheit-vertrauen, --profil-verwaltung, --technologie-lebensstil */

/* FAQ-Fragen auf dem Hub: als Links erkennbar, ohne Aufzählungspunkte */
.hilfe .hilfe-faq-teaser li {
  margin: 0;
}
.hilfe .hilfe-faq-teaser a,
.hilfe .hilfe__more-link a {
  color: var(--hilfe-accent);
  text-decoration: none;
}
.hilfe .hilfe-faq-teaser a:hover,
.hilfe .hilfe__more-link a:hover {
  color: var(--hilfe-accent-strong);
  text-decoration: underline;
}
.hilfe .hilfe__more-link {
  margin: var(--hilfe-gap) 0 0;
}

.hilfe .hilfe__cta {
  margin: 1rem 0 0;
}

/* Themenseiten ------------------------------------------------------------- */

.hilfe-toc__title {
  margin: 0 0 .5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hilfe-accent);
}
.hilfe-toc__list {
  display: grid;
  gap: .5rem;
  list-style: none;
  margin: 0 0 var(--hilfe-gap);
  padding: 0;
}
.hilfe .hilfe-toc__list a {
  color: var(--hilfe-accent);
  text-decoration: none;
}
.hilfe .hilfe-toc__list a:hover {
  color: var(--hilfe-accent-strong);
  text-decoration: underline;
}

.hilfe-question {
  margin-top: calc(var(--hilfe-gap) * 2);
  padding-top: calc(var(--hilfe-gap) * 2);
  border-top: 1px solid var(--hilfe-border);
}
.hilfe-question__title {
  margin-top: 0;
}
.hilfe-question__answer {
  margin-bottom: 0;
}

/* FAQ ---------------------------------------------------------------------- */

.hilfe-accordion {
  margin-top: var(--hilfe-gap);
}
.hilfe-accordion__item {
  border-bottom: 1px solid var(--hilfe-border);
  padding-block: var(--hilfe-gap);
}
.hilfe-accordion__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--hilfe-ink);
}
.hilfe-accordion__item summary::marker {
  color: var(--hilfe-highlight);
}
.hilfe-accordion__item[open] summary {
  color: var(--hilfe-accent);
}
.hilfe-accordion__answer {
  margin: 1rem 0 0;
}

/* Suche (hilfe-suche.js) -------------------------------------------------- */

.hilfe-search {
  position: relative;
  max-width: 40rem;
  margin: var(--hilfe-gap) 0 0;   /* Abstand nach unten macht .hilfe__section */
}
.hilfe-search__form {
  margin: 0;
}
.hilfe .hilfe-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: .75em 1em;
  border: 1px solid var(--hilfe-input-border);
  border-radius: var(--hilfe-radius);
  background: #fff;
  font: inherit;
  color: inherit;
}
.hilfe .hilfe-search__input:focus {
  outline: 2px solid var(--hilfe-accent);
  outline-offset: 1px;
  border-color: var(--hilfe-accent);
}
.hilfe-search__results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  margin: .25rem 0 0;
  padding: .25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hilfe-input-border);
  border-radius: var(--hilfe-radius);
}
.hilfe .hilfe-search__option a,
.hilfe .hilfe-search__option a:hover {
  display: block;
  padding: .5rem 1rem;
  color: inherit;
  text-decoration: none;
}
.hilfe-search__option.is-active,
.hilfe-search__option:hover {
  background: var(--hilfe-active);
}
.hilfe-search__question {
  display: block;
  color: var(--hilfe-ink);
}
/* Thema unter dem Treffer: ausgeblendet. Zum Anzeigen die Zeile
   display:none durch display:block ersetzen. */
.hilfe-search__topic {
  display: none;
  opacity: .7;
}
.hilfe-search__empty {
  padding: .5rem 1rem;
}

.hilfe-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}