/*
 * studio nea – individuelle Anpassungen für Joomla 6.1
 * Basis: GK Portfolio 2.1.0
 *
 * Die Anpassungen wurden aus neaskepsis_2016 übertragen, ohne die
 * Joomla-6.1-Basisdateien zurückzustufen oder zu überschreiben.
 */

/* Bestehende studio-nea-Gestaltung */
body {
    background: #f1f1f1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
}

.site {
    padding: 15px 0;
}

.logo__image {
    margin: 40px auto;
    max-height: 50px;
}

.logo__title {
    font-size: 3.6rem;
    font-weight: 200;
    font-style: normal;
    text-transform: none;
}

.logo__description {
    font-weight: 200;
    text-transform: none;
}

/* Featured-Markierung wie in neaskepsis_2016 ausblenden */
.item__preview--featured:before,
.item__preview--featured:after {
    content: none !important;
    display: none !important;
}


/* studio nea V7 – fixed article arrows */
.studio-nea-pager > .previous,
.studio-nea-pager > .next {
    position: fixed !important;
    top: 50% !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 1000 !important;
}
.studio-nea-pager > .previous { left: 0 !important; }
.studio-nea-pager > .next { left: auto !important; right: 0 !important; }
.studio-nea-pager > .previous > a,
.studio-nea-pager > .next > a {
    width: 54px !important;
    height: 54px !important;
    background: #363636 !important;
    color: #fff !important;
    text-decoration: none !important;
}
.studio-nea-arrow-glyph {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 52px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

/* studio nea V7 – Team/CV accordion matching the former pagebreak sliders */
.studio-nea-team-accordion {
    margin-top: 52px;
    border-top: 1px solid #dedede;
}
.studio-nea-team-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 0 10px;
    border: 0;
    border-bottom: 1px solid #dedede;
    background: transparent;
    color: #777;
    text-align: left;
    font: inherit;
    font-size: 1.6rem;
    cursor: pointer;
}
.studio-nea-team-toggle:hover,
.studio-nea-team-toggle:focus {
    background: transparent;
    color: #363636;
    outline: none;
}
.studio-nea-team-panel {
    padding: 28px 0 10px;
}
.studio-nea-team-panel[hidden] {
    display: none !important;
}

/* studio nea V9 – make side navigation independent of legacy pager layout */
ul.studio-nea-pager {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
ul.studio-nea-pager > li.previous,
ul.studio-nea-pager > li.next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
ul.studio-nea-pager > li > a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}


/* studio nea V10
   The original Joomla 3 template used FontAwesome <i> icons inside the
   fixed pager. Reuse that exact mechanism instead of Unicode glyphs. */
ul.studio-nea-pager > li.previous > a > i,
ul.studio-nea-pager > li.next > a > i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 54px !important;
    height: 54px !important;
    line-height: 54px !important;
    color: #fff !important;
    font-family: FontAwesome !important;
    font-size: 1.2rem !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-align: center !important;
}
ul.studio-nea-pager > li.previous > a > i {
    text-indent: 6px !important;
}
ul.studio-nea-pager > li.next > a > i {
    text-indent: -6px !important;
}

/* Team accordion: retain the old grey, normal-case appearance in every state.
   The template's global button rules otherwise force uppercase/dark active states. */
.studio-nea-team-toggle,
.studio-nea-team-toggle:hover,
.studio-nea-team-toggle:focus,
.studio-nea-team-toggle:active,
.studio-nea-team-toggle[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #777 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
}
.studio-nea-team-toggle:hover,
.studio-nea-team-toggle:focus {
    color: #363636 !important;
}


/* studio nea V12 – robust old-style previous/next navigation.
   Uses plain < and > characters, so it has no dependency on FontAwesome
   or Joomla icon markup. */
ul.studio-nea-pager {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.studio-nea-pager > li.previous,
ul.studio-nea-pager > li.next {
    position: fixed !important;
    top: 50% !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
    list-style: none !important;
}

ul.studio-nea-pager > li.previous {
    left: 0 !important;
    right: auto !important;
}

ul.studio-nea-pager > li.next {
    right: 0 !important;
    left: auto !important;
}

ul.studio-nea-pager > li.previous > a,
ul.studio-nea-pager > li.next > a {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #363636 !important;
    color: #fff !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    transition: none !important;
}

ul.studio-nea-pager .studio-nea-chevron {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    line-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: center !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

ul.studio-nea-pager > li.previous > a:hover,
ul.studio-nea-pager > li.next > a:hover,
ul.studio-nea-pager > li.previous > a:focus,
ul.studio-nea-pager > li.next > a:focus {
    background: #363636 !important;
    color: #fff !important;
    margin: 0 !important;
}

/* Keep fixed side navigation on mobile too; old template media rules otherwise
   change pager positioning to absolute. */
@media (max-width: 768px) {
    ul.studio-nea-pager > li.previous,
    ul.studio-nea-pager > li.next {
        position: fixed !important;
        top: 50% !important;
    }
}


/* studio nea V13 – feine < > Zeichen wie die übrige Typografie der Website */
ul.studio-nea-pager .studio-nea-chevron {
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 54px !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
}

/* Die schwarzen Flächen bleiben 54 × 54 px wie im alten Template. */
ul.studio-nea-pager > li.previous > a,
ul.studio-nea-pager > li.next > a {
    background: #363636 !important;
}


/* studio nea V14 – responsive refinement.
   Desktop remains close to the original. On phones the side navigation
   becomes smaller and slightly tucked behind the viewport edge so it
   covers less content. */
ul.studio-nea-pager .studio-nea-chevron {
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 54px !important;
    text-align: center !important;
    text-indent: 0 !important;
}

@media (max-width: 600px) {
    ul.studio-nea-pager > li.previous,
    ul.studio-nea-pager > li.next {
        position: fixed !important;
        top: 50% !important;
        width: 40px !important;
        height: 40px !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }

    ul.studio-nea-pager > li.previous {
        left: 0 !important;
    }

    ul.studio-nea-pager > li.next {
        right: 0 !important;
    }

    ul.studio-nea-pager > li.previous > a,
    ul.studio-nea-pager > li.next > a {
        width: 40px !important;
        height: 40px !important;
        background: rgba(54, 54, 54, 0.88) !important;
    }

    ul.studio-nea-pager > li.previous > a {
        margin-left: -5px !important;
    }

    ul.studio-nea-pager > li.next > a {
        margin-right: -5px !important;
    }

    ul.studio-nea-pager .studio-nea-chevron {
        width: 40px !important;
        height: 40px !important;
        line-height: 39px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 380px) {
    ul.studio-nea-pager > li.previous,
    ul.studio-nea-pager > li.next,
    ul.studio-nea-pager > li.previous > a,
    ul.studio-nea-pager > li.next > a {
        width: 36px !important;
        height: 36px !important;
    }

    ul.studio-nea-pager .studio-nea-chevron {
        width: 36px !important;
        height: 36px !important;
        line-height: 35px !important;
        font-size: 15px !important;
    }
}