/* BOXRING FAQ page. Loaded only on /faq/ by the MU loader.

   Rule of the operator review of 27.09.2026: no design of our own. Sections,
   colours, spacing and type come from Enfold patterns of the start page and
   the team page, set in the page itself. This file only styles what those
   patterns do not contain: the search with its suggestion list and the
   nested accordions (native <details>/<summary>), kept in the look of the
   existing FAQ accordions, plus the buttons: review of 30.09.2026, every
   button looks and behaves like the button pair of the start page slider
   (PROD/PREPROD 330, first slide), measured there in the rendered page. */

:root {
    --faq-red: #d63e2d;
    --faq-dark: #161616;
    --faq-line: rgba(128, 128, 128, 0.3);
    --faq-soft: #f4f4f4;
}

/* ---------- Hintergrundfotos von Kopfbereich und Handlungsaufruf ----------
   Die Fotos setzt die Seite selbst (Sektionshintergrund, 1500x720). Hier nur
   der Fokuspunkt, weil "cover" auf breiten Sektionen nur 52 bis 78 Prozent
   der Bildhoehe zeigt, und fuer schmale Bildschirme die Hochformatvariante.
   Ausschnitte und Fokuspunkte: src/faq-page/media/faq-media.json. */

#top #wrap_all #faq-hero.avia-section {
    background-position: 50% 60% !important;
}

#top #wrap_all #faq-cta.avia-section {
    background-position: 50% 40% !important;
}

@media only screen and (max-width: 767px) {
    #top #wrap_all #faq-hero.avia-section {
        background-image: url("/wp-content/uploads/2026/10/faq-hero-coach-boxring-shirt-hochformat.jpg") !important;
        background-position: 75% 50% !important;
    }

    #top #wrap_all #faq-cta.avia-section {
        background-image: url("/wp-content/uploads/2026/10/faq-cta-sportlerin-poolnudeln-hochformat.jpg") !important;
        background-position: 35% 20% !important;
    }
}

/* ---------- Kopfbereich: beide Buttons nebeneinander ---------- */

#top .faq-hero-section .av_three_fifth {
    text-align: center;
}

#top .faq-hero-section .avia-button-wrap.faq-hero-button {
    display: inline-block;
    margin: 0 6px 12px;
}

/* ---------- Buttons wie der Slider der Startseite ----------
   Gemessen am 30.09.2026 auf 330: rot "theme-color" #d63e2d, weisse Schrift,
   12px fett in Versalien, Innenabstand 15/16px, Unterkante 1px #b41c0b,
   Mindestbreite 140px, Hover
   Deckkraft 0,9; "light" transparent-dunkel mit 3px weissem Rahmen,
   Innenabstand 12/16px, Hover Deckkraft 0,7. Kein Pfeil, keine Farbaenderung
   beim Hover. */

#top #wrap_all .faq-btn .avia-button,
#top #wrap_all .faq-answer a.faq-cta {
    display: inline-block;
    min-width: 140px;
    box-sizing: border-box;
    margin: 0;
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid #b41c0b;
    border-radius: 0;
    background-color: var(--faq-red);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s ease-out;
}

#top #wrap_all .faq-btn.faq-btn-light .avia-button {
    padding: 12px 16px;
    border: 3px solid #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

#top #wrap_all .faq-btn .avia-button:hover,
#top #wrap_all .faq-answer a.faq-cta:hover {
    background-color: var(--faq-red);
    color: #ffffff;
    opacity: 0.9;
    transition: all 0.4s ease-in-out;
}

#top #wrap_all .faq-btn.faq-btn-light .avia-button:hover {
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}

#top #wrap_all .faq-btn .avia-button:focus-visible,
#top #wrap_all .faq-answer a.faq-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--faq-red);
}

/* ---------- Suche ---------- */

#top .faq-search {
    margin: 0 0 28px;
}

#top .faq-search-label {
    display: block;
    margin: 0 0 8px;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#top .faq-search-box {
    position: relative;
}

#top #faq-fragen input.faq-search-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    font-size: 1em;
    line-height: 1.3;
}

#top #faq-fragen input.faq-search-input:focus {
    outline: 3px solid var(--faq-red);
    outline-offset: 2px;
}

#top .faq-search-status {
    min-height: 1.4em;
    margin: 8px 0 0;
    font-size: 0.9em;
}

#top .faq-suggest-panel {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    text-align: left;
}

#top ul.faq-suggest {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: min(60vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#top .faq-suggest-option {
    display: block;
    margin: 0;
    padding: 11px 16px;
    min-height: 44px;
    box-sizing: border-box;
    border-left: 3px solid transparent;
    cursor: pointer;
    list-style: none;
}

#top .faq-suggest-option:hover,
#top .faq-suggest-option[aria-selected="true"] {
    background: var(--faq-soft);
    border-left-color: var(--faq-red);
}

#top .faq-suggest-q {
    display: block;
    color: var(--faq-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

#top .faq-suggest-topic {
    display: block;
    margin-top: 2px;
    color: #5f5f5f;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#top .faq-suggest-empty {
    margin: 0;
    padding: 14px 16px;
    color: var(--faq-dark);
    font-size: 15px;
    line-height: 1.5;
}

#top .faq-suggest-empty a {
    color: #b3291b;
    font-weight: 600;
    text-decoration: underline;
}

#top .faq-search[hidden],
#top .faq-suggest-panel[hidden],
#top .faq-suggest[hidden],
#top .faq-suggest-empty[hidden] {
    display: none;
}

/* ---------- Themen und Fragen ---------- */

/* Sprungziele liegen unter der festen Kopfleiste. */
#top .faq-topic,
#top .faq-item,
#top #faq-abschluss {
    scroll-margin-top: 100px;
}

#top .faq-questions-section .avia_codeblock {
    margin: 0;
}

/* Jedes Thema traegt beide Linien; die doppelte Linie zwischen zwei Themen
   faellt durch den negativen Abstand zusammen. */
#top .faq-topic {
    border-top: 1px solid var(--faq-line);
    border-bottom: 1px solid var(--faq-line);
    margin-top: -1px;
}

#top .faq-topic-summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: relative;
    cursor: pointer;
    padding: 20px 46px 20px 2px;
    list-style: none;
}

#top .faq-topic-summary::-webkit-details-marker,
#top .faq-question::-webkit-details-marker {
    display: none;
}

#top .faq-topic-name {
    flex: 1 1 auto;
    color: var(--faq-dark);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

#top .faq-topic-count {
    flex: none;
    color: #5f5f5f;
    font-size: 16px;
    white-space: nowrap;
}

#top .faq-topic-summary:hover .faq-topic-name {
    color: var(--faq-red);
}

#top .faq-topic-body {
    padding: 0 0 18px;
}

/* Plus und Minus wie bei den Fragen. */
#top .faq-topic-summary::after,
#top .faq-question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background:
        linear-gradient(currentColor, currentColor) center/14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 14px no-repeat;
    opacity: 0.6;
}

/* Erste Ebene eine Stufe groesser: Plus 16px statt 14px. */
#top .faq-topic-summary::after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background:
        linear-gradient(currentColor, currentColor) center/16px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 16px no-repeat;
}

#top .faq-topic[open] > .faq-topic-summary::after {
    background: linear-gradient(currentColor, currentColor) center/16px 2px no-repeat;
}

#top .faq-topic[open] > .faq-topic-summary::after,
#top .faq-item[open] > .faq-question::after {
    opacity: 1;
    color: var(--faq-red);
}

#top .faq-item[open] > .faq-question::after {
    background: linear-gradient(currentColor, currentColor) center/14px 2px no-repeat;
}

#top .faq-topic-summary:focus-visible,
#top .faq-question:focus-visible {
    outline: 3px solid var(--faq-red);
    outline-offset: -1px;
}

@supports not selector(:focus-visible) {
    #top .faq-topic-summary:focus,
    #top .faq-question:focus {
        outline: 3px solid var(--faq-red);
        outline-offset: -1px;
    }
}

#top .faq-group {
    margin: 0;
}

#top .faq-item {
    border: 1px solid var(--faq-line);
    border-left: 3px solid transparent;
    background: #ffffff;
    margin: 0 0 8px;
}

#top .faq-item[open] {
    border-left-color: var(--faq-red);
}

#top .faq-question {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 15px 50px 15px 16px;
    list-style: none;
}

/* Verbindlich: Fragen sind keine Ueberschriften und keine Versalien. */
#top .faq-question .faq-q {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--faq-dark);
}

#top .faq-question:hover .faq-q {
    color: var(--faq-red);
}

#top .faq-answer {
    padding: 0 50px 18px 16px;
}

#top .faq-answer p {
    margin: 0 0 12px;
    line-height: 1.75;
}

#top .faq-answer p:last-child {
    margin-bottom: 0;
}

#top .faq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

#top .faq-answer,
#top .faq-question .faq-q,
#top .faq-topic-name,
#top .faq-suggest-q {
    overflow-wrap: break-word;
}

/* ---------- Mobil ---------- */

@media only screen and (max-width: 767px) {
    #top .faq-topic-summary {
        padding-right: 42px;
    }

    #top .faq-topic-name {
        font-size: 17px;
    }

    #top .faq-question {
        padding: 14px 44px 14px 13px;
    }

    #top .faq-answer {
        padding: 0 13px 16px;
    }

    #top ul.faq-suggest {
        max-height: 50vh;
    }

    #top .faq-hero-section .avia-button-wrap.faq-hero-button {
        display: block;
        margin: 0 0 12px;
    }
}

/* Nur fuer Screenreader, z. B. der Hinweis "(oeffnet in neuem Tab)" an PDF-Links. */
#top .faq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}