/* =========================================================
   FAQ Frontend – an Landhaus-Design angepasst
   ========================================================= */

/* Hier halte ich fest, dass ich das Frontend-Design des FAQ-Systems
   optisch an das bestehende Landhaus-Design angepasst habe. */


/* ---------- FAQ Design Variablen ---------- */
:root{
  /* Hier definiere ich die Hauptakzentfarbe meines FAQ-Designs. */
  --faq-accent: #871715;

  /* Hier definiere ich die Rahmenfarbe der FAQ-Karten mit leichter Transparenz. */
  --faq-border: rgba(135, 23, 21, 0.38);

  /* Hier lege ich die Stärke des Rahmens zentral als Variable fest. */
  --faq-border-width: 1.5px;
}


/* ---------- Grundbereich ---------- */
.lq-faq-wrap{
  /* Hier begrenze ich die maximale Breite des gesamten FAQ-Bereichs,
     damit der Inhalt nicht zu breit dargestellt wird. */
  max-width: 980px;

  /* Hier zentriere ich den FAQ-Bereich horizontal auf der Seite. */
  margin: 0 auto;
}

.lq-faq-list{
  /* Hier verwende ich Flexbox, damit die FAQ-Elemente sauber untereinander angeordnet werden. */
  display: flex;

  /* Hier lege ich fest, dass die FAQ-Karten untereinander in einer Spalte angezeigt werden. */
  flex-direction: column;

  /* Hier definiere ich den Abstand zwischen den einzelnen FAQ-Karten. */
  gap: 14px;
}


/* ---------- Einzelne FAQ-Karte ---------- */
.lq-faq-item{
  /* Hier vergebe ich den Rahmen der einzelnen FAQ-Karte. */
  border: var(--faq-border-width) solid var(--faq-border);

  /* Hier runde ich die Ecken der FAQ-Karte deutlich ab,
     damit das Design weicher und moderner wirkt. */
  border-radius: 22px;

  /* Hier setze ich den Hintergrund der Karte auf Weiß. */
  background: #ffffff;

  /* Hier sorge ich dafür, dass Inhalte innerhalb der Karte nicht über die abgerundeten Ecken hinausragen. */
  overflow: hidden;

  /* Hier füge ich einen dezenten Schatten hinzu,
     damit sich die FAQ-Karten leicht vom Hintergrund abheben. */
  box-shadow: 0 10px 24px rgba(0,0,0,0.035);

  /* Hier definiere ich weiche Übergänge für Schatten, Bewegung und Rahmenfarbe. */
  transition:
          box-shadow 0.26s ease,
          transform 0.26s ease,
          border-color 0.26s ease;
}

.lq-faq-item:hover{
  /* Hier verschiebe ich die Karte beim Hover minimal nach oben,
     damit eine leichte Interaktion sichtbar wird. */
  transform: translateY(-1px);

  /* Hier verstärke ich den Schatten beim Überfahren mit der Maus leicht. */
  box-shadow: 0 14px 26px rgba(0,0,0,0.045);

  /* Hier verstärke ich zusätzlich die Rahmenfarbe beim Hover. */
  border-color: rgba(135, 23, 21, 0.5);
}

.lq-faq-item.is-open{
  /* Hier vergebe ich für geöffnete FAQ-Karten einen etwas stärkeren Schatten,
     damit der geöffnete Zustand deutlicher sichtbar wird. */
  box-shadow: 0 16px 30px rgba(0,0,0,0.05);

  /* Hier färbe ich auch im geöffneten Zustand den Rahmen etwas kräftiger ein. */
  border-color: rgba(135, 23, 21, 0.5);
}


/* ---------- Klickbarer Fragenbereich ---------- */
.lq-faq-question{
  /* Hier lasse ich den Button immer die volle Breite der Karte einnehmen. */
  width: 100%;

  /* Hier entferne ich den Standardrahmen des Buttons. */
  border: 0;

  /* Hier setze ich den Hintergrund des Fragenbereichs auf Weiß. */
  background: #ffffff;

  /* Hier definiere ich den Innenabstand des klickbaren Bereichs. */
  padding: 18px 22px;

  /* Hier nutze ich Flexbox, damit Text und Pfeil nebeneinander stehen. */
  display: flex;

  /* Hier richte ich die Inhalte vertikal mittig aus. */
  align-items: center;

  /* Hier verteile ich Fragetext und Pfeil mit maximalem Abstand. */
  justify-content: space-between;

  /* Hier definiere ich den Abstand zwischen Text und Pfeil. */
  gap: 18px;

  /* Hier richte ich den Fragetext linksbündig aus. */
  text-align: left;

  /* Hier stelle ich den Mauszeiger auf Pointer,
     damit der klickbare Charakter klar erkennbar ist. */
  cursor: pointer;

  /* Hier übernehme ich die Schrift-Einstellungen des umgebenden Layouts. */
  font: inherit;
}

.lq-faq-question:focus-visible{
  /* Hier vergebe ich eine Fokusmarkierung für Tastatur-Navigation,
     damit die Bedienung barriereärmer bleibt. */
  outline: 2px solid rgba(135, 23, 21, 0.22);

  /* Hier ziehe ich die Fokusmarkierung leicht nach innen. */
  outline-offset: -2px;
}

.lq-faq-question-text{
  /* Hier setze ich die Schriftgröße des Fragetextes. */
  font-size: 16px;

  /* Hier mache ich den Fragetext fett,
     damit er sich klar vom Antworttext abhebt. */
  font-weight: 700;

  /* Hier vergebe ich eine dunkle Schriftfarbe für gute Lesbarkeit. */
  color: #111;

  /* Hier definiere ich die Zeilenhöhe für eine angenehme Textdarstellung. */
  line-height: 1.45;

  /* Hier definiere ich einen weichen Übergang für die Farbänderung beim Hover. */
  transition: color 0.22s ease;
}

.lq-faq-question:hover .lq-faq-question-text{
  /* Hier färbe ich den Fragetext beim Hover in der Akzentfarbe ein. */
  color: var(--faq-accent);
}


/* ---------- Fremde Theme-Linien am Frage-Button entfernen ---------- */
.lq-faq-question,
.lq-faq-question:hover,
.lq-faq-question:focus,
.lq-faq-question:active,
.lq-faq-question:focus-visible{
  /* Hier entferne ich konsequent alle möglichen Standardrahmen
     und Stile, die vom Theme auf Buttons gelegt werden könnten. */
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.lq-faq-question::before,
.lq-faq-question::after{
  /* Hier entferne ich zusätzliche Pseudo-Elemente,
     falls das Theme automatische Linien oder Symbole einfügt. */
  content: none !important;
  display: none !important;
}


/* ---------- Mehr Fragen anzeigen ---------- */
.lq-faq-more{
  /* Hier definiere ich den oberen Abstand zum Button-Bereich. */
  margin-top: 22px;

  /* Hier richte ich den Button mittig aus. */
  text-align: center;
}

.lq-faq-more-link{
  /* Hier stelle ich den Link als Inline-Flex-Element dar,
     damit ich ihn wie einen Button gestalten kann. */
  display: inline-flex;

  /* Hier richte ich den Inhalt vertikal mittig aus. */
  align-items: center;

  /* Hier richte ich den Inhalt horizontal mittig aus. */
  justify-content: center;

  /* Hier definiere ich den Innenabstand des Buttons. */
  padding: 11px 22px;

  /* Hier setze ich die Schriftfarbe des Buttons. */
  color: #871715;

  /* Hier vergebe ich einen sehr dezenten Hintergrund in der Akzentfarbe. */
  background: rgba(135,23,21,.05);

  /* Hier vergebe ich einen feinen Rahmen passend zur Akzentfarbe. */
  border: 1px solid rgba(135,23,21,.22);

  /* Hier forme ich den Button pillenförmig. */
  border-radius: 999px;

  /* Hier definiere ich die Schriftgröße des Buttons. */
  font-size: 15px;

  /* Hier mache ich die Schrift etwas kräftiger. */
  font-weight: 600;

  /* Hier lege ich die Zeilenhöhe fest. */
  line-height: 1.2;

  /* Hier entferne ich die Standard-Unterstreichung von Links. */
  text-decoration: none;

  /* Hier definiere ich sanfte Übergänge für Hover- und Klickzustände. */
  transition:
          background-color .18s ease,
          border-color .18s ease,
          color .18s ease,
          transform .12s ease,
          box-shadow .18s ease;
}

.lq-faq-more-link:hover{
  /* Hier verstärke ich den Hintergrund beim Hover leicht. */
  background: rgba(135,23,21,.09);

  /* Hier verstärke ich die Rahmenfarbe beim Hover. */
  border-color: rgba(135,23,21,.34);

  /* Hier dunkle ich die Schriftfarbe beim Hover leicht ab. */
  color: #6f1211;

  /* Hier füge ich beim Hover einen leichten Schatten hinzu. */
  box-shadow: 0 8px 18px rgba(135,23,21,.10);

  /* Hier verschiebe ich den Button minimal nach oben. */
  transform: translateY(-1px);
}

.lq-faq-more-link:active{
  /* Hier setze ich die Bewegung beim aktiven Klicken wieder zurück. */
  transform: translateY(0);

  /* Hier reduziere ich den Schatten im Klickmoment leicht. */
  box-shadow: 0 4px 10px rgba(135,23,21,.08);
}


/* ---------- Pfeilbutton ---------- */
.lq-faq-chevron{
  /* Hier definiere ich die Breite des runden Pfeil-Elements. */
  width: 30px;

  /* Hier definiere ich die Höhe des runden Pfeil-Elements. */
  height: 30px;

  /* Hier stelle ich sicher, dass das Element nicht schmaler wird. */
  min-width: 30px;

  /* Hier nutze ich Inline-Flex für eine saubere Zentrierung des SVGs. */
  display: inline-flex;

  /* Hier richte ich das Icon vertikal mittig aus. */
  align-items: center;

  /* Hier richte ich das Icon horizontal mittig aus. */
  justify-content: center;

  /* Hier forme ich den Bereich vollständig rund. */
  border-radius: 999px;

  /* Hier setze ich den Hintergrund in der Hauptakzentfarbe. */
  background: #871715;

  /* Hier färbe ich das Symbol weiß ein. */
  color: #ffffff;

  /* Hier vergebe ich einen dezenten Schatten für mehr Tiefe. */
  box-shadow: 0 6px 14px rgba(135, 23, 21, 0.16);

  /* Hier definiere ich weiche Übergänge für Drehung, Hintergrund und Schatten. */
  transition:
          transform 0.24s ease,
          background 0.24s ease,
          box-shadow 0.24s ease;
}

.lq-faq-chevron svg{
  /* Hier definiere ich die Größe des SVG-Pfeils. */
  width: 13px;
  height: 13px;

  /* Hier stelle ich sicher, dass das SVG wie ein Blockelement behandelt wird. */
  display: block;
}

.lq-faq-item.is-open .lq-faq-chevron{
  /* Hier drehe ich den Pfeil im geöffneten Zustand um 180 Grad. */
  transform: rotate(180deg);

  /* Hier passe ich im geöffneten Zustand die Hintergrundfarbe leicht an. */
  background: #9a1a18;

  /* Hier verstärke ich im geöffneten Zustand den Schatten etwas. */
  box-shadow: 0 8px 16px rgba(135, 23, 21, 0.2);
}


/* ---------- Antwortbereich ---------- */
.lq-faq-answer{
  /* Hier setze ich die maximale Höhe standardmäßig auf 0,
     damit der Antwortbereich zunächst eingeklappt ist. */
  max-height: 0;

  /* Hier blende ich den überstehenden Inhalt aus. */
  overflow: hidden;

  /* Hier definiere ich den Übergang für das Auf- und Zuklappen. */
  transition: max-height 0.34s ease;
}

.lq-faq-answer-inner{
  /* Hier definiere ich den Innenabstand des Antwortbereichs. */
  padding: 16px 22px 20px 22px;

  /* Hier lege ich die Schriftgröße der Antwort fest. */
  font-size: 16px;

  /* Hier definiere ich eine gut lesbare Zeilenhöhe. */
  line-height: 1.65;

  /* Hier vergebe ich eine dunkle, aber etwas weichere Schriftfarbe als bei den Fragen. */
  color: #222;

  /* Hier vergebe ich einen leicht abgesetzten Hintergrund für den Antwortbereich. */
  background: #fdfcfc !important;

  /* Hier entferne ich mögliche fremde obere Rahmenlinien. */
  border-top: none !important;

  /* Hier setze ich stattdessen eine feine innere Trennlinie mit Box-Shadow. */
  box-shadow: inset 0 calc(var(--faq-border-width)) 0 var(--faq-border) !important;
}

/* Textabstände */
.lq-faq-answer-inner p{
  /* Hier definiere ich die Abstände zwischen mehreren Absätzen innerhalb der Antwort. */
  margin: 0 0 10px 0;
}

.lq-faq-answer-inner p:last-child{
  /* Hier entferne ich den unteren Abstand beim letzten Absatz,
     damit der Bereich sauber abschließt. */
  margin-bottom: 0;
}

/* Leere Meldung */
.lq-faq-empty{
  /* Hier gestalte ich die Hinweisbox,
     falls aktuell keine FAQs verfügbar sind. */
  padding: 18px 20px;
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 16px;
  background: #fafafa;
  color: #333;
}


/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .lq-faq-wrap{
    /* Hier passe ich die maximale Breite für kleinere Geräte an,
       damit links und rechts etwas Rand bleibt. */
    max-width: 92%;

    /* Hier zentriere ich den Bereich weiterhin auf mobilen Geräten. */
    margin: 0 auto;
  }

  .lq-faq-list{
    /* Hier reduziere ich den Abstand zwischen den FAQ-Karten auf kleineren Geräten leicht. */
    gap: 12px;
  }

  .lq-faq-item{
    /* Hier verkleinere ich die Rundung der Karten etwas für die mobile Darstellung. */
    border-radius: 18px;
  }

  .lq-faq-question{
    /* Hier reduziere ich die Innenabstände des Fragenbereichs auf mobilen Geräten. */
    padding: 15px 16px;

    /* Hier verkleinere ich den Abstand zwischen Text und Pfeil. */
    gap: 12px;
  }

  .lq-faq-question-text{
    /* Hier verkleinere ich die Schriftgröße des Fragetextes auf kleineren Displays leicht. */
    font-size: 15px;

    /* Hier passe ich die Zeilenhöhe etwas an. */
    line-height: 1.4;
  }

  .lq-faq-answer-inner{
    /* Hier reduziere ich die Innenabstände des Antwortbereichs auf mobilen Geräten. */
    padding: 14px 16px 16px 16px;

    /* Hier verkleinere ich die Schriftgröße der Antwort leicht. */
    font-size: 15px;

    /* Hier passe ich auch die Zeilenhöhe für mobile Geräte an. */
    line-height: 1.6;

    /* Hier entferne ich erneut mögliche fremde obere Linien. */
    border-top: none !important;

    /* Hier setze ich auch mobil die feine innere Trennlinie mit Box-Shadow ein. */
    box-shadow: inset 0 calc(var(--faq-border-width)) 0 var(--faq-border) !important;
  }

  .lq-faq-chevron{
    /* Hier verkleinere ich das Pfeil-Element für mobile Geräte leicht. */
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .lq-faq-chevron svg{
    /* Hier verkleinere ich auch das SVG-Icon auf mobilen Geräten leicht. */
    width: 12px;
    height: 12px;
  }
}