/**
 * Horsequip Calm — Section Accordion (Single Source of Truth)
 *
 * Vereinheitlicht das Akkordeon-Pattern für:
 *   - Profil-View   (.about-us-section, .expertise-section, .gallery-section,
 *                    .events-section, .jobs-section, .horses-section,
 *                    .marketplace-section, .pricing-section,
 *                    .documents-section, .organisation-section)
 *   - Stall-View    (analoge Klassen)
 *   - Edit-Forms    (<details>.about-section, .gallery-section, .pricing-section,
 *                    .events-section, .marketplace-section, .jobs-section,
 *                    .horses-section, .pferde-section, .contact-section,
 *                    .profile-section, .profil-section, .documents-section)
 *
 * NICHT enthalten (bewusst lokal in style.css / inserieren.css):
 *   - Startseite     (.collapsible-nav-section, .collapsible-item, …)
 *     ist die Vorbild-Geometrie und bleibt 1:1 in style.css.
 *   - Inserieren     (.inserieren-collapsible-item, .section-header, …)
 *
 * Markup (Ziel-State, BEM):
 *   <details class="hq-section">
 *     <summary class="hq-section__header">
 *       <i class="fa fa-chevron-right hq-section__chevron"></i>
 *       <span class="hq-section__title">Über mich</span>
 *     </summary>
 *     <div class="hq-section__content"> … </div>
 *   </details>
 *
 * Wichtiger Unterschied zur vorherigen Version:
 * Der Chevron ist jetzt ein ECHTES `<i class="fa fa-chevron-right">` Element
 * (eingefügt via `details.html.twig` Override + horsequip_preprocess_details()),
 * NICHT mehr ein CSS-`::before`-Pseudo-Glyph mit FA-Solid font-weight 900.
 * Damit nutzt die Edit-Form GENAU denselben FontAwesome-Renderpfad wie das
 * Startseiten-Akkordeon und sieht optisch identisch aus (gleiche Strichdicke).
 *
 * Geometrie-Tokens (siehe tokens.css):
 *   --hq-section-padding-x:        15px
 *   --hq-section-padding-top:      0
 *   --hq-section-padding-bottom:   30px   ← regelt Sektion-Abstand
 *   --hq-section-gap:              15px   ← Chevron ↔ Title
 *   --hq-section-title-tracking:   0.25em
 */

/* ================================================================== *
 *  1. Container                                                       *
 * ================================================================== */

.hq-section,
.about-us-section,
.about-section,
.expertise-section,
.gallery-section,
.pricing-section,
.events-section,
.own-events-section,
.jobs-section,
.own-jobs-section,
.horses-section,
.marketplace-section,
.own-marketplace-section,
.documents-section,
.organisation-section,
.contact-section,
.profile-section,
.profil-section,
.pferde-section,
.own-pferde-section,
.stable-section,
.guest-section,
.horse-section,
.basic-section,
.details-section,
.training-section,
.media-section,
.location-section,
.services-section,
.marketplace-product-section,
.media-preview-section,
.job-section,
.requirements-section,
.application-section {
  background: var(--hq-white);
  border: none;
  border-radius: 0;
  margin: 0;
}

/* ================================================================== *
 *  2. Header (Chevron + Title) — die klickbare Leiste                 *
 *
 *  Geometrie identisch zu .collapsible-header auf der Startseite:
 *    padding: 0 15px 30px 15px;  gap: 15px;
 * ================================================================== */

.hq-section__header,
/* DIV-basierte Header (Profil-/Stall-View) */
.about-us-header,
.expertise-main-header,
.gallery-header,
.pricing-header,
.events-header,
.jobs-header,
.horses-header,
.marketplace-header,
.documents-header,
.organisation-header,
/* <details><summary>-basierte Header (Edit-Forms) */
.hq-section > summary,
.about-section > summary,
.expertise-section > summary,
.gallery-section > summary,
.pricing-section > summary,
.events-section > summary,
.own-events-section > summary,
.marketplace-section > summary,
.own-marketplace-section > summary,
.jobs-section > summary,
.own-jobs-section > summary,
.horses-section > summary,
.pferde-section > summary,
.own-pferde-section > summary,
.contact-section > summary,
.profile-section > summary,
.profil-section > summary,
.documents-section > summary,
.stable-section > summary,
.guest-section > summary,
.horse-section > summary,
.basic-section > summary,
.details-section > summary,
.training-section > summary,
.media-section > summary,
.location-section > summary,
.services-section > summary,
.marketplace-product-section > summary,
.media-preview-section > summary,
.job-section > summary,
.requirements-section > summary,
.application-section > summary {
  display: flex;
  align-items: center;
  gap: var(--hq-section-gap);
  padding:
    var(--hq-section-padding-top)
    var(--hq-section-padding-x)
    var(--hq-section-padding-bottom)
    var(--hq-section-padding-x);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--hq-font-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  color: var(--hq-section-title-color);
  transition: color var(--hq-ease-normal);
}

/* Native <summary>-Marker (Dreieck) ausblenden — wir rendern eigenes Chevron */
.hq-section__header::-webkit-details-marker,
.hq-section > summary::-webkit-details-marker,
.about-section > summary::-webkit-details-marker,
.expertise-section > summary::-webkit-details-marker,
.gallery-section > summary::-webkit-details-marker,
.pricing-section > summary::-webkit-details-marker,
.events-section > summary::-webkit-details-marker,
.own-events-section > summary::-webkit-details-marker,
.marketplace-section > summary::-webkit-details-marker,
.own-marketplace-section > summary::-webkit-details-marker,
.jobs-section > summary::-webkit-details-marker,
.own-jobs-section > summary::-webkit-details-marker,
.horses-section > summary::-webkit-details-marker,
.pferde-section > summary::-webkit-details-marker,
.own-pferde-section > summary::-webkit-details-marker,
.contact-section > summary::-webkit-details-marker,
.profile-section > summary::-webkit-details-marker,
.profil-section > summary::-webkit-details-marker,
.documents-section > summary::-webkit-details-marker,
.stable-section > summary::-webkit-details-marker,
.guest-section > summary::-webkit-details-marker,
.horse-section > summary::-webkit-details-marker,
.basic-section > summary::-webkit-details-marker,
.details-section > summary::-webkit-details-marker,
.training-section > summary::-webkit-details-marker,
.media-section > summary::-webkit-details-marker,
.location-section > summary::-webkit-details-marker,
.services-section > summary::-webkit-details-marker,
.marketplace-product-section > summary::-webkit-details-marker,
.media-preview-section > summary::-webkit-details-marker,
.job-section > summary::-webkit-details-marker,
.requirements-section > summary::-webkit-details-marker,
.application-section > summary::-webkit-details-marker {
  display: none;
}

/* ================================================================== *
 *  3. Title                                                           *
 * ================================================================== */

.hq-section__title,
.about-us-title,
.expertise-main-title,
.gallery-title,
.pricing-title,
.events-title,
.jobs-title,
.horses-title,
.marketplace-title,
.documents-title,
.organisation-title {
  font-size: var(--hq-section-title-size);
  font-weight: var(--hq-section-title-weight);
  letter-spacing: var(--hq-section-title-tracking);
  text-transform: uppercase;
  color: var(--hq-section-title-color);
  margin: 0;
  transition: color var(--hq-ease-normal);
}

/* Falls eine Edit-Form noch ohne Twig-Override gerendert wird (Cache),
   bekommt der reine `<summary>`-Text ebenfalls die richtigen Title-Stile. */
.hq-section > summary,
.about-section > summary,
.expertise-section > summary,
.gallery-section > summary,
.pricing-section > summary,
.events-section > summary,
.own-events-section > summary,
.marketplace-section > summary,
.own-marketplace-section > summary,
.jobs-section > summary,
.own-jobs-section > summary,
.horses-section > summary,
.pferde-section > summary,
.own-pferde-section > summary,
.contact-section > summary,
.profile-section > summary,
.profil-section > summary,
.documents-section > summary,
.stable-section > summary,
.guest-section > summary,
.horse-section > summary,
.basic-section > summary,
.details-section > summary,
.training-section > summary,
.media-section > summary,
.location-section > summary,
.services-section > summary,
.marketplace-product-section > summary,
.media-preview-section > summary,
.job-section > summary,
.requirements-section > summary,
.application-section > summary {
  font-size: var(--hq-section-title-size);
  font-weight: var(--hq-section-title-weight);
  letter-spacing: var(--hq-section-title-tracking);
  text-transform: uppercase;
}

/* ================================================================== *
 *  4. Chevron (echtes <i class="fa fa-chevron-right">)                *
 *
 *  Wir setzen hier KEIN font-weight / -webkit-text-stroke / content,
 *  weil das Glyph vom FontAwesome-Stylesheet kommt und identisch zu
 *  `.collapsible-header i` (Startseite) gerendert werden soll.
 * ================================================================== */

.hq-section__chevron,
.about-us-chevron,
.expertise-main-chevron,
.gallery-chevron,
.pricing-chevron,
.events-chevron,
.jobs-chevron,
.horses-chevron,
.marketplace-chevron,
.documents-chevron,
.organisation-chevron {
  font-size: var(--hq-section-chevron-size);
  color: var(--hq-section-chevron-color);
  transition: transform var(--hq-ease-normal), color var(--hq-ease-normal);
  margin: 0;
  flex: 0 0 auto;
  line-height: 1;
}

/* ================================================================== *
 *  5. Open / Active States                                            *
 * ================================================================== */

/* Title-Farbe ändern wenn geöffnet */
.hq-section__header[aria-expanded="true"],
.hq-section__header[aria-expanded="true"] .hq-section__title,
.about-us-header:not(.collapsed),
.about-us-header:not(.collapsed) .about-us-title,
.expertise-main-header:not(.collapsed),
.expertise-main-header:not(.collapsed) .expertise-main-title,
.gallery-header:not(.collapsed),
.gallery-header:not(.collapsed) .gallery-title,
.pricing-header:not(.collapsed),
.pricing-header:not(.collapsed) .pricing-title,
.events-header:not(.collapsed),
.events-header:not(.collapsed) .events-title,
.jobs-header:not(.collapsed),
.jobs-header:not(.collapsed) .jobs-title,
.horses-header:not(.collapsed),
.horses-header:not(.collapsed) .horses-title,
.marketplace-header:not(.collapsed),
.marketplace-header:not(.collapsed) .marketplace-title,
.documents-header:not(.collapsed),
.documents-header:not(.collapsed) .documents-title,
.organisation-header:not(.collapsed),
.organisation-header:not(.collapsed) .organisation-title,
.hq-section[open] > summary,
.hq-section[open] > summary .hq-section__title,
.about-section[open] > summary,
.expertise-section[open] > summary,
.gallery-section[open] > summary,
.pricing-section[open] > summary,
.events-section[open] > summary,
.own-events-section[open] > summary,
.marketplace-section[open] > summary,
.own-marketplace-section[open] > summary,
.jobs-section[open] > summary,
.own-jobs-section[open] > summary,
.horses-section[open] > summary,
.pferde-section[open] > summary,
.own-pferde-section[open] > summary,
.contact-section[open] > summary,
.profile-section[open] > summary,
.profil-section[open] > summary,
.documents-section[open] > summary,
.stable-section[open] > summary,
.guest-section[open] > summary,
.horse-section[open] > summary,
.basic-section[open] > summary,
.details-section[open] > summary,
.training-section[open] > summary,
.media-section[open] > summary,
.location-section[open] > summary,
.services-section[open] > summary,
.marketplace-product-section[open] > summary,
.media-preview-section[open] > summary,
.job-section[open] > summary,
.requirements-section[open] > summary,
.application-section[open] > summary {
  color: var(--hq-section-title-color-open);
}

/* Chevron rotieren wenn geöffnet */
.hq-section__header[aria-expanded="true"] .hq-section__chevron,
.about-us-header:not(.collapsed) .about-us-chevron,
.expertise-main-header:not(.collapsed) .expertise-main-chevron,
.gallery-header:not(.collapsed) .gallery-chevron,
.pricing-header:not(.collapsed) .pricing-chevron,
.events-header:not(.collapsed) .events-chevron,
.jobs-header:not(.collapsed) .jobs-chevron,
.horses-header:not(.collapsed) .horses-chevron,
.marketplace-header:not(.collapsed) .marketplace-chevron,
.documents-header:not(.collapsed) .documents-chevron,
.organisation-header:not(.collapsed) .organisation-chevron,
.hq-section[open] > summary .hq-section__chevron,
.about-section[open] > summary .hq-section__chevron,
.expertise-section[open] > summary .hq-section__chevron,
.gallery-section[open] > summary .hq-section__chevron,
.pricing-section[open] > summary .hq-section__chevron,
.events-section[open] > summary .hq-section__chevron,
.own-events-section[open] > summary .hq-section__chevron,
.marketplace-section[open] > summary .hq-section__chevron,
.own-marketplace-section[open] > summary .hq-section__chevron,
.jobs-section[open] > summary .hq-section__chevron,
.own-jobs-section[open] > summary .hq-section__chevron,
.horses-section[open] > summary .hq-section__chevron,
.pferde-section[open] > summary .hq-section__chevron,
.own-pferde-section[open] > summary .hq-section__chevron,
.contact-section[open] > summary .hq-section__chevron,
.profile-section[open] > summary .hq-section__chevron,
.profil-section[open] > summary .hq-section__chevron,
.documents-section[open] > summary .hq-section__chevron,
.stable-section[open] > summary .hq-section__chevron,
.guest-section[open] > summary .hq-section__chevron,
.horse-section[open] > summary .hq-section__chevron,
.basic-section[open] > summary .hq-section__chevron,
.details-section[open] > summary .hq-section__chevron,
.training-section[open] > summary .hq-section__chevron,
.media-section[open] > summary .hq-section__chevron,
.location-section[open] > summary .hq-section__chevron,
.services-section[open] > summary .hq-section__chevron,
.marketplace-product-section[open] > summary .hq-section__chevron,
.media-preview-section[open] > summary .hq-section__chevron,
.job-section[open] > summary .hq-section__chevron,
.requirements-section[open] > summary .hq-section__chevron,
.application-section[open] > summary .hq-section__chevron {
  transform: rotate(var(--hq-section-chevron-rotate));
  color: var(--hq-section-chevron-color-open);
}

/* Hover */
.hq-section__header:hover,
.hq-section__header:hover .hq-section__title,
.about-us-header:hover,
.expertise-main-header:hover,
.gallery-header:hover,
.pricing-header:hover,
.events-header:hover,
.jobs-header:hover,
.horses-header:hover,
.marketplace-header:hover,
.documents-header:hover,
.organisation-header:hover {
  color: var(--hq-section-title-color-open);
}

/* ================================================================== *
 *  6. Content                                                         *
 *
 *  Inhalt teilt sich denselben X-Inset wie der Header (15px), so dass
 *  Sektion-Titel und Inhalt links bündig stehen. Top-Padding bleibt 0,
 *  weil der Header bereits 30px Bottom-Padding mitbringt — exakt wie
 *  auf der Startseite.
 * ================================================================== */

.hq-section__content,
.about-us-content,
.expertise-main-content,
.gallery-content,
.pricing-content,
.events-content,
.jobs-content,
.horses-content,
.marketplace-content,
.documents-content,
.organisation-content {
  overflow: hidden;
  transition: max-height var(--hq-ease-normal), padding var(--hq-ease-normal);
}

.hq-section__content[hidden],
.about-us-content.collapsed,
.expertise-main-content.collapsed,
.gallery-content.collapsed,
.pricing-content.collapsed,
.events-content.collapsed,
.jobs-content.collapsed,
.horses-content.collapsed,
.marketplace-content.collapsed,
.documents-content.collapsed,
.organisation-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.about-us-content:not(.collapsed),
.expertise-main-content:not(.collapsed),
.gallery-content:not(.collapsed),
.pricing-content:not(.collapsed),
.events-content:not(.collapsed),
.jobs-content:not(.collapsed),
.horses-content:not(.collapsed),
.marketplace-content:not(.collapsed),
.documents-content:not(.collapsed),
.organisation-content:not(.collapsed) {
  max-height: none;
  padding:
    var(--hq-section-content-pad-y)
    var(--hq-section-content-pad-x);
}

/* `.hq-section__content` (Edit-Forms via Twig-Override): Inhalt linksbündig
   zum Title-Text einrücken — also genau hinter Chevron + Gap. Inset =
   --hq-section-content-indent (= padding-x + chevron + gap). */
.hq-section__content {
  padding:
    0
    var(--hq-section-padding-x)
    var(--hq-section-padding-bottom)
    var(--hq-section-content-indent);
}