/*
 * Die Referenz setzt diese Werte inline. Die lokale CSP blockiert Inline-CSS,
 * daher werden die gleichen drei Darstellungsregeln hier nachgeladen.
 */
#bottom-footer .copyright > span {
    font-size: 8pt;
}

#bottom-footer > p {
    text-align: right;
}

#bottom-footer > p > span {
    color: #999999;
    font-size: 8pt;
}

/*
 * Die von der Referenz ausgelieferte FA7-Subset-Schrift enthält das
 * Warenkorb-Glyph nicht. Die JABA-eigene FA5-Solid-Schrift enthält exakt
 * denselben Codepoint und wird nur als lokale Fallback-Schrift eingesetzt.
 */
#accesspress-breadcrumb .jaba-cart-icon {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
}

/* This is the existing public shop navigation in its new visual treatment.
   It stays in the content area above the shop or sign-in view. */
#main-body .portal-navigation {
    position: relative;
    z-index: 15;
    display: flex;
    width: 100%;
    align-items: stretch;
    background: #5382c3;
}

#main-body .portal-navigation-links {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-body .portal-navigation a,
#main-body .portal-navigation summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

/* Nur die Schrift ist kleiner geworden (26.08.2026) — die Icons behalten
   ihre bisherige Groesse, statt mit dem Elternelement zu schrumpfen (Font
   Awesome skaliert sonst mit font-size). */
#main-body .portal-navigation a i,
#main-body .portal-navigation summary i {
    font-size: 1rem;
}

#main-body .portal-navigation a:hover,
#main-body .portal-navigation a:focus-visible,
#main-body .portal-navigation summary:hover,
#main-body .portal-navigation summary:focus-visible,
#main-body .portal-navigation a[aria-current="page"] {
    background: #3974b2;
    color: #ffffff;
    outline: none;
}

#main-body .portal-navigation summary {
    list-style: none;
}

#main-body .portal-navigation summary::-webkit-details-marker {
    display: none;
}

#main-body .portal-navigation summary .fa-chevron-down {
    font-size: 0.7rem;
    transition: transform 150ms ease;
}

#main-body .portal-navigation-dropdown[open] > summary .fa-chevron-down {
    transform: rotate(180deg);
}

#main-body .portal-navigation-dropdown {
    position: relative;
}

#main-body .portal-navigation-dropdown > ul {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    min-width: 18.5rem;
    margin: 0;
    padding: 0.5rem 0;
    border: 1px solid #c9d2da;
    border-top: 0;
    background: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgb(4 61 95 / 18%);
    list-style: none;
}

#main-body .portal-navigation-dropdown > ul a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    color: #141414;
}

#main-body .portal-navigation-dropdown > ul a i {
    color: #5382c3;
}

#main-body .portal-navigation-dropdown > ul a:hover,
#main-body .portal-navigation-dropdown > ul a:focus-visible {
    background: #eef6fc;
    color: #043d5f;
}

#main-body .portal-navigation-account {
    margin-left: auto;
}

#main-body .portal-navigation-account > ul li + li {
    border-top: 1px solid #e2e7eb;
}

/* The shop nav sits right above the sidebar+content split on every page
   that uses it (shop, domain search, cart, auth). #main-body .shopbereich
   loses its grid gap to a later display:block override (customer-area.css),
   so without this the sidebar sits flush against the nav. Not scoped to
   .auth-bereich: every .shopbereich-layout needs the same gap. */
#main-body .portal-navigation + .shopbereich-layout,
#main-body .portal-navigation + .shop-mobile-navigation + .shopbereich-layout {
    margin-top: 2rem;
}

#main-body .auth-bereich-layout {
    align-items: start;
}

#main-body .auth-bereich-inhalt {
    display: flex;
    justify-content: center;
}

#main-body .auth-bereich .login-karte {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
}

#main-body .auth-karte-breit {
    width: 100%;
}

#main-body .auth-karte .formular {
    width: min(100%, 38rem);
}

#main-body .auth-formular {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

#main-body .auth-formular-einspaltig,
#main-body .auth-formular-breit {
    grid-template-columns: 1fr;
}

#main-body .auth-formular-breit {
    grid-column: 1 / -1;
}

#main-body .auth-formular .feld {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    margin: 0;
}

#main-body .feld-hinweis {
    color: #5c6670;
    font-size: 0.8125rem;
    font-weight: 400;
}

#main-body .auth-karte .feld input:not([type="checkbox"]):not([type="radio"]),
#main-body .auth-karte .feld select {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #c9d2da;
    border-radius: 0;
    background: #f8f9fa;
    color: #141414;
    font: inherit;
}

#main-body .auth-karte .feld select {
    cursor: pointer;
}

/* The blanket padding above (0.5rem 0.75rem) also wins over
   customer-area.css's #main-body .feld-eingabe input { padding-left: 2.5rem }
   — same #main-body-scoped specificity, but this rule sits later in the
   cascade. Without the room that padding-left makes, typed text renders
   underneath the field's icon (envelope/lock). Restated here, one class
   more specific, so the icon still gets its space on sign-in/registration. */
#main-body .auth-karte .feld .feld-eingabe input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 2.5rem;
}

#main-body .auth-formular > button {
    width: auto;
    justify-self: start;
}

#main-body .auth-karte .feld input:focus-visible,
#main-body .auth-karte .feld select:focus-visible {
    border-color: #4382c3;
    outline: 2px solid rgb(67 130 195 / 22%);
    outline-offset: 1px;
}

#main-body .auth-wechsel {
    margin: 1rem 0 0;
}

@media (max-width: 48rem) {
    #main-body .portal-navigation-links {
        min-width: 0;
        overflow-x: auto;
    }

    #main-body .portal-navigation a,
    #main-body .portal-navigation summary {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    #main-body .auth-formular {
        grid-template-columns: 1fr;
    }

    #main-body .auth-formular-breit {
        grid-column: auto;
    }
}

/* The locale selector belongs with the other utility action: it is compact
   while closed, but leaves enough room for full native language names. */
#accesspress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* position und z-index halten das geoeffnete Sprachmenue vorn. Der Wert muss
   ueber **jeder** Navigationsleiste liegen, und das ist der Grund, warum hier
   60 steht und nicht mehr 25: der urspruengliche Wert war gegen die Shop-
   Leiste (.portal-navigation, z-index 15) gewaehlt worden, aber danach kamen
   Leisten mit hoeheren Werten dazu, und niemand hat diese Zeile nachgezogen.
   Die Rangfolge, gegen die 60 gewaehlt ist:

       15  .portal-navigation          (Shop-Leiste, Desktop)
       30  .shop-mobile-navigation     (Reiterleiste, Handy)
       30  .kunden-navigation          (Kundenleiste, Handy)
       31  deren Untermenue
       40  .kunden-navigation          (Kundenleiste, Desktop)
       41  deren Untermenue

   Bei 25 malte die Reiterleiste quer durch das offene Sprachmenue und
   verdeckte die unteren Sprachen — auf dem Handy sichtbar zwischen "Deutsch"
   und "Francais". Wer hier eine neue Leiste einfuehrt, prueft diese Liste.

   Beide Angaben zusammen erzeugen den noetigen Stapelkontext; frueher
   entstand er nebenbei durch ein transform, das hier stand — der z-index war
   auch damals das, was wirkte, denn ein Stapelkontext ohne ihn malt auf
   Ebene 0 seines Elternkontextes.

   Der Abstand zur Warenkorb-Schaltflaeche war genau jenes transform
   (`translateX(2rem)`), und das war ein Fehler: ein transform verschiebt das
   Bild, nicht den Platz. Die Sprachwahl ragte damit 32px ueber die rechte
   Kante ihres Kastens hinaus, und sobald der Seitenrand schmaler wurde als
   diese 32px, ueber den Viewport — an der laufenden Anwendung ab etwa
   1185px abwaerts gemessen, also auf jedem Notebook und jedem Handy, nicht
   nur auf kleinen Geraeten. Die Seite liess sich seitlich wackeln. Als
   margin-left nimmt derselbe Abstand Platz ein: die Gruppe aus Warenkorb
   und Sprachwahl steht buendig zum Raster, der Abstand zwischen beiden
   bleibt derselbe, und es ragt nichts mehr hinaus. */
#accesspress-breadcrumb .sprachauswahl {
    position: relative;
    z-index: 60;
    margin-left: 2rem;
    text-transform: none;
}

#accesspress-breadcrumb .sprachmenue {
    position: relative;
}

#accesspress-breadcrumb .sprachmenue summary {
    display: inline-flex;
    min-width: 5.75rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 0.2rem;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    list-style: none;
}

#accesspress-breadcrumb .sprachmenue summary::-webkit-details-marker {
    display: none;
}

#accesspress-breadcrumb .sprachmenue summary:hover,
#accesspress-breadcrumb .sprachmenue[open] summary {
    border-color: #ffffff;
    background: rgb(4 61 95 / 18%);
}

#accesspress-breadcrumb .sprachmenue summary:focus-visible,
#accesspress-breadcrumb .sprachmenue a:focus-visible,
#accesspress-breadcrumb .quick-nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

#accesspress-breadcrumb .sprachmenue summary .fa-chevron-down {
    font-size: 0.65rem;
    transition: transform 150ms ease;
}

#accesspress-breadcrumb .sprachmenue[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}

#accesspress-breadcrumb .sprachmenue ul {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 11.5rem;
    margin: 0;
    padding: 0.375rem;
    border: 1px solid #b9cfe2;
    border-radius: 0.2rem;
    background: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgb(4 61 95 / 20%);
    list-style: none;
}

#accesspress-breadcrumb .sprachmenue li + li {
    border-top: 1px solid #e3edf5;
}

#accesspress-breadcrumb .sprachmenue a {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem;
    color: #043d5f;
    font-size: 0.875rem !important;
    font-weight: 600;
    text-decoration: none;
}

#accesspress-breadcrumb .sprachmenue a:hover,
#accesspress-breadcrumb .sprachmenue a[aria-current="true"] {
    background: #eaf3fa;
    color: #043d5f;
}

#accesspress-breadcrumb .sprachmenue a .fa-check {
    color: #31679e;
    font-size: 0.75rem;
    text-align: right;
}

#accesspress-breadcrumb .sprachmenue-flagge {
    display: inline-block;
    width: 1.3rem;
    height: 0.9rem;
    border: 1px solid rgb(4 61 95 / 22%);
    box-shadow: 0 1px 1px rgb(4 61 95 / 15%);
    font-size: 1.125rem;
    line-height: 1;
}

#accesspress-breadcrumb .sprachmenue-flagge--de {
    background: linear-gradient(#1d1d1b 0 33.33%, #dc2633 33.33% 66.66%, #f8d24b 66.66%);
}

#accesspress-breadcrumb .sprachmenue-flagge--en {
    background-color: #012169;
    background-image:
        linear-gradient(90deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
        linear-gradient(transparent 38%, #c8102e 38% 62%, transparent 62%),
        linear-gradient(90deg, transparent 31%, #ffffff 31% 69%, transparent 69%),
        linear-gradient(transparent 24%, #ffffff 24% 76%, transparent 76%),
        linear-gradient(31deg, transparent 43%, #c8102e 43% 57%, transparent 57%),
        linear-gradient(-31deg, transparent 43%, #c8102e 43% 57%, transparent 57%),
        linear-gradient(31deg, transparent 29%, #ffffff 29% 71%, transparent 71%),
        linear-gradient(-31deg, transparent 29%, #ffffff 29% 71%, transparent 71%);
}

#accesspress-breadcrumb .sprachmenue-flagge--fr {
    background: linear-gradient(90deg, #1b55a0 0 33.33%, #ffffff 33.33% 66.66%, #e03a3e 66.66%);
}

#accesspress-breadcrumb .sprachmenue-flagge--it {
    background: linear-gradient(90deg, #17834a 0 33.33%, #ffffff 33.33% 66.66%, #d83a43 66.66%);
}

#accesspress-breadcrumb .sprachmenue-flagge--nl {
    background: linear-gradient(#ae1c28 0 33.33%, #ffffff 33.33% 66.66%, #21468b 66.66%);
}

#accesspress-breadcrumb .sprachmenue-flagge--pl {
    background: linear-gradient(#ffffff 0 50%, #dc143c 50%);
}

#accesspress-breadcrumb .sprachmenue-flagge--es {
    background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

#accesspress-breadcrumb .sprachmenue-code {
    letter-spacing: 0.04em;
}

#accesspress-breadcrumb .quick-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.25rem;
}

#accesspress-breadcrumb .quick-nav:hover {
    font-size: 14px !important;
}

@media (max-width: 768px) {
    #accesspress-breadcrumb {
        justify-content: flex-start;
    }

    /* Dieselbe Sache wie oben, nur mit dem halben Wert: auf schmalen
       Geraeten stand hier ein zweites translateX und schob die Sprachwahl
       16px ueber den rechten Rand. Als margin nimmt es Platz ein. */
    #accesspress-breadcrumb .sprachauswahl {
        margin-left: 1rem;
    }

    /* Die 10px des uebernommenen Themes lassen die Sprachwahl auf dem Handy
       am Rand kleben — sie ist ein umrandeter Knopf, kein Text, und sitzt
       damit sichtbar enger als alles andere auf der Seite. 1rem auf beiden
       Seiten: die Ueberschrift links und die Bedienelemente rechts bekommen
       denselben Abstand. Nur die Titelzeile, nicht der uebernommene Kopf
       darueber — dessen Logo und Menuetaste bleiben, wo sie sind. */
    .page_header_wrap .ak-container {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}