/* Lokal eingebundene variable Schrift, Gewichte 100–900. */
@font-face {
    font-family: "Inter";
    src: url("fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/InterVariable-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* ========================================================================== 
   Grundlagen und Schrift
   ========================================================================== */

:root {
    --link-color: #7c2890;
    scrollbar-gutter: stable;
    font-family: "Inter", system-ui, sans-serif;
    font-optical-sizing: auto;
    font-feature-settings: "calt" 1, "ss07" 1, "ss08" 1;
    font-size: clamp(16px, calc(12.689655px + 0.689655vw), 20px);
    line-height: 1.56;
    color: #24202a;
    background-color: #faf9fb;
    /* Sehr feine Papierkörnung, ohne die Grundfarbe zu verändern. */
    /* Weiche Vignette über Körnung und vereinzelten Kratzspuren. */
    
}
html {
   background-color: #faf9fb;
}
body {
   background-color: #faf9fb;
    margin: 0;
    padding: 0;
   background-image:
        linear-gradient(to bottom, rgba(45, 35, 30, 0.05) 0, rgba(45, 35, 30, 0.03) 6rem, rgba(45, 35, 30, 0.01) 14rem, transparent 24rem),
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(45, 35, 30, 0.005) 70%, rgba(45, 35, 30, 0.03) 100%),
        url("paper-scratches.svg"),
        url("paper-grain.svg");
    background-size: 100% 24rem, 100% 100%, 960px 760px, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-attachment: scroll;
}

a {
    color: var(--link-color);
    text-underline-offset: 0.15em;
}
a:hover {
   color: #000;
}

h1,
h2,
h3 {
    line-height: 1.05;
}

h1 {
    /* Wächst von 480px bis 1060px (= 1000px + 3rem bei 20px Basis). */
    font-size: clamp(2rem, calc(10vw - 16px), 4.5rem);
}
h2 {
   font-size: 2.25rem;
   margin-top: 2em;
}

/* Inhaltsüberschriften: gleicher Wachstumsbereich wie H1.
   Karten und Sections behalten ihre eigenen Schriftgrößen. */
h2:where(:not(.story-card *, section *)) {
    font-size: clamp(1.5rem, calc(6.62069px + 3.62069vw), 2.25rem);
}

/* Dezente Kennzeichnung der Schlagwortübersichten. */
h1 {
    position: relative;
}

.page-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.35rem;
    color: #777;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

main {
   min-height: 60vh;
   margin: 1rem auto 3rem;
   max-width: 1000px;
   width: calc(100% - 3rem);
}

/* Textspalte unabhängig von der Breite der Bilder und des Artikels. */
.story p,
.story figcaption {
    max-width: 36rem;
}

.story > p {
   margin-block-start: 1.5rem;
}


/* ========================================================================== 
   Header: Logo, Hauptmenü und Untermenü
   ========================================================================== */

header {
    padding: 1rem 1.9rem 2rem 0.5rem;
}


.header-main {
    display: flex;
    /* Das Hauptmenü bleibt auch ohne Untermenü auf gleicher Höhe. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    font-size: 1.35rem;
    font-weight: 700;
}

.header-main .brand {
    flex: 0 1 18rem;
}

.brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.header-navigation {
    flex: 1;
    min-width: 0;
    margin-left: auto;
}

.header-primary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 2.8rem;
}

header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.header-main nav {
    justify-content: flex-end;
    margin-left: auto;
    text-align: right;
}

.header-navigation nav {
    justify-content: flex-end;
    text-align: right;
}

.header-navigation nav[aria-label="Hauptnavigation"] {
    margin-bottom: 0.5rem;
}

.header-primary nav[aria-label="Hauptnavigation"] {
    margin: 0.5rem 0;
}

header nav a {
    font-weight: 600;
    text-decoration: none;
}

header nav a[aria-current] {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

header nav a[aria-current="page"] {
    text-decoration-color: currentColor;
}

header nav a[aria-current="location"] {
    text-decoration-color: #fff;
}

.subnav {
    justify-content: flex-end;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border-radius: 0;
}

.header-navigation .subnav {
    margin: 0;
    padding: 0;
    background: none;
}

.subnav a {
    font-size: 0.95rem;
}



/* ========================================================================== 
   Beitragslisten und Seitennavigation
   ========================================================================== */

.entries article {
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
}

.entries h2 {
    font-size: 1.3rem;
    margin-top: auto;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

/* ========================================================================== 
   Geschichten-Übersicht: Bilderraster ohne automatische Textauszüge
   ========================================================================== */

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 2rem;
}

.story-card {
    transition: transform 180ms ease, box-shadow 180ms ease;
    min-width: 0;
    border-radius: 3px;
    overflow: hidden;
}

.story-card-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    /* Individuelle Bildfarben stehen in story-colors.css. */
    background-color: #f2f0f3;
    background-image:
        radial-gradient(ellipse at center, transparent 30%, rgba(45, 35, 30, 0.025) 70%, rgba(45, 35, 30, 0.075) 100%),
        url("paper-scratches.svg"),
        url("paper-grain.svg");
    background-size: 100% 100%, 960px 760px, 180px 180px;
    background-repeat: no-repeat, repeat, repeat;
}

.story-card-link:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 0.4rem;
}

.story-card-image {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    /* Definierte Höhe, damit das Bild zuverlässig vollständig hineinpasst. */
    height: clamp(13rem, 28vw, 20rem);
    overflow: hidden;
    padding: 1rem;
    background: transparent;
}

.story-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
    mix-blend-mode: multiply;
}

/* Fotos: vollständig sichtbar, mit Freiraum für die feste Drehung. */
.story-card-photo .story-card-image {
    padding: 1rem;
}

.story-card-photo .story-card-image img {
    object-fit: contain;
    transform: rotate(var(--photo-angle, 0deg));
}

.tilt-left {
    --photo-angle: -0.4deg;
}

.tilt-right {
    --photo-angle: 0.4deg;
}

.tilt-soft-left {
    --photo-angle: -0.2deg;
}

.tilt-soft-right {
    --photo-angle: 0.2deg;
}

/* Dokumente und empfindliche Motive: vollständig und ohne Drehung. */
.story-card-complete .story-card-image {
    padding: 1rem;
}

.story-card h2 {
    /* Kurze Titel unten bündig mit mehrzeiligen Titeln der Nachbarkachel. */
    margin: auto 0 0;
    padding: 0.65rem 0.8rem 0.35rem;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.2;
}

.reading-time {
    display: block;
    padding: 0 2.8rem 0.85rem 0.85rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1;
    color: #00000044;
}

.story-card-link:hover h2,
.story-card-link:focus-visible h2 {
    color: #000;
    text-decoration: none;
}

/* Dezenter Papierkarten-Effekt; der Titel bleibt schwarz. */
.story-card-link::after {
    content: "→";
    position: absolute;
    right: 0.8rem;
    bottom: 0.55rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: rgba(70, 55, 65, 0.2);
    transition: color 180ms ease;
}

@media (hover: hover) {
    .story-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1.25rem rgba(45, 35, 30, 0.1);
    }

    .story-card-link:hover::after {
        color: #000;
    }
}

.story-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(45, 35, 30, 0.1);
    outline: 2px solid var(--link-color);
    outline-offset: 0.25rem;
}

.story-card-link:focus-visible::after {
    color: #000;
}

@media (prefers-reduced-motion: reduce) {
    .story-card,
    .story-card-link::after {
        transition: none;
    }

    .story-card:hover,
    .story-card:focus-within {
        transform: none;
    }
}

@media (min-width: 48rem) {
    .story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================================================== 
   Bilder und Bildunterschriften
   ========================================================================== */

img {
    max-width: 100%;
    height: auto;
}

figure {
   margin: 2rem 0;
   font-size: 0.9rem;
   color: #777;
}
figure img {
   display: block;
}

figcaption,
small {
    color: #777;
}

.featured-image {
    margin: 1.5rem 0 10rem;
    position: relative;
}
.featured-image::after {
    content: "";
    position: absolute;
    bottom: -5.8rem;
    left: calc(50% - 0.8rem);
    width: 1.6rem;
    height: 1.6rem;
    background: url("TeBe-Kern_schwarz.svg") center / contain no-repeat;
    opacity: 0.75;
}

/* Gegner: ohne Trennlogo und mit kompakterem Abstand zum Text. */
body.gegner .featured-image,
body.verein .featured-image {
    margin: 1.5rem 0 2rem;
}

body.gegner .featured-image::after,
body.verein .featured-image::after {
    content: none;
}

.featured-image img {
    display: block;
    /* Kleinere Originaldateien nicht vergrößern. */
    width: auto;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.featured-image figcaption {
    margin-top: 0.6rem;
    font-size: 0.95rem;
}

.featured-image figcaption p {
    margin: 0.3rem 0;
    line-height: 1.4;
    font-style: italic;
}

/* ========================================================================== 
   Schlagworte und weitere Inhaltselemente
   ========================================================================== */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.chips a {
    display: block;
    padding: 0.1rem 0.6rem;
    border-radius: 0.3rem;
    border-radius: 0.3rem;
    border: 1px solid;
    text-decoration: none;
}
.chips a:hover {
   background: #fff;
}

.terms {
    columns: 3;
    column-width: 15rem;
}

.terms li {
    break-inside: avoid;
}

blockquote {
    box-sizing: border-box;
    max-width: 36em;
    margin: 2.5rem 0 3rem;
    padding: 0 2.25rem;
    border: 0;
    color: #777;
}

/* Zitatzeichen mittig oberhalb des Textes, ohne seitliche Umfließung. */
blockquote::before {
    content: "”";
    display: block;
    height: 0.333em;
    line-height: 0.75em;
    font-size: clamp(4rem, 12vw, 9rem);
    text-align: center;
    color: rgba(70, 55, 65, 0.2);
    pointer-events: none;
}

blockquote > p:first-child {
    margin-top: 0;
}

table {
    display: block;
    max-width: 100%;
    overflow: auto;
}

dt {
    font-weight: bold;
}

dd {
    margin-bottom: 0.6rem;
}

/* ========================================================================== 
   Begegnungen auf Gegnerseiten
   ========================================================================== */

/* Gleichrangige Bereiche: Begegnungen und zugehörige Geschichten. */
.entry-updated {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #777;
}

.search-result-group, 
.opponent-matches,
.related-stories {
    margin: 4.5rem 0 2.5rem;
}

.opponent-matches > h2,
.related-stories > h2,
.search-result-group > h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 1.125rem;
}

/* Gemeinsame zweite Ebene: Mannschaften und verknüpfte Beitragstitel. */
.match-team > summary,
.linked-entries :is(h2, h3) {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.match-team,
.linked-entries article {
    border-top: 1px solid rgba(70, 55, 65, 0.2);
}

.match-team:last-child,
.linked-entries article:last-child {
    border-bottom: 1px solid rgba(70, 55, 65, 0.2);
}

.match-team > summary,
.linked-entries :is(h2, h3) a {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    padding: 0.8rem 2rem 0.8rem 0;
    list-style: none;
    cursor: pointer;
}

.match-team > summary {
    color: var(--link-color);
}

.match-team > summary:hover {
    color: #000;
}

.match-team > summary::-webkit-details-marker {
    display: none;
}

.linked-entries :is(h2, h3) a::after {
    content: "→";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(70, 55, 65, 0.2);
}

.match-team > summary::after {
    content: "+";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
}

.match-team[open] > summary::after {
    content: "−";
}

.linked-entries article {
    padding: 0;
    border-bottom: 0;
}

.linked-entries article:last-child {
    border-bottom: 1px solid rgba(70, 55, 65, 0.2);
}

.linked-entries :is(h2, h3) {
    margin: 0;
}

.linked-entries :is(h2, h3) a {
    display: block;
    text-decoration: none;
}



.linked-entries :is(h2, h3) a:hover,
.linked-entries :is(h2, h3) a:focus-visible {
    color: #000;
    text-decoration: none;
}

.linked-entries :is(h2, h3) a:hover::after,
.linked-entries :is(h2, h3) a:focus-visible::after {
    color: currentColor;
}

.match-team > summary:focus-visible,
.linked-entries :is(h2, h3) a:focus-visible,
.match-table-scroll:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 0.2rem;
}

/* Gegnerlisten: kleines Vereinszeichen und die zugehörigen Bestandszahlen. */
.linked-entries :is(h2, h3) a.opponent-list-link {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.opponent-list-logo {
    display: flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

.opponent-list-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.opponent-list-text {
    min-width: 0;
}

.opponent-list-counts,
.profile-list-counts {
    display: block;
    color: #777;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.5;
}

.opponent-list-counts span {
    display: block;
}

/* Schlagwortseiten: eigenständiger Einstieg zum ausführlichen Themenbeitrag. */
.topic-intro {
    margin: 4rem 0 4rem;
}

.topic-intro > h2,
.tag-results-heading {
    margin: 0 0 1rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
}

.topic-intro > p {
    max-width: 36rem;
    margin: 0 0 1.25rem;
    color: #777;
    font-size: 0.9rem;
}

.match-group-title {
    margin: 1.5rem 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Kleine Bildschirme: nur die Tabelle scrollt, nicht die ganze Seite. */
.match-table-scroll {
    max-width: 100%;
    margin: 0 0 1rem;
    overflow-x: auto;
}

.match-table {
    display: table;
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: 0.7rem;
    line-height: 1.5;
}

.match-table th,
.match-table td {
    padding: 0.4rem 0.45rem;
    text-align: left;
    vertical-align: top;
}

.match-table th {
    color: #605968;
    font-weight: 500;
    border-bottom: 1px solid rgba(70, 55, 65, 0.25);
}

.match-table td {
    border-top: 1px solid rgba(70, 55, 65, 0.1);
}

.match-table .match-new-season td {
    border-top: 2px solid rgba(70, 55, 65, 0.25);
    padding-top: 0.7rem;
}

.match-table .match-season,
.match-table .match-date,
.match-table .match-result {
    white-space: nowrap;
}

.match-table .match-attendance,
.match-table .match-result {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.match-table .match-fixture {
    min-width: 12rem;
}

.match-result {
    font-weight: 600;
}

/* ========================================================================== 
   Footer und Suche
   ========================================================================== */

.site-footer {
    box-sizing: border-box;
    width: calc(100% - 3rem);
    max-width: 1000px;
    margin: 5rem auto 0;
    padding: 2rem 0 2.5rem;
}

.footer-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.footer-links {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.footer-links a {
    text-decoration: none;
}

.footer-logo {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    opacity: 0.75;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer-links a:focus-visible,
.footer-logo:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 0.2rem;
}

input,
button {
    padding: 0.3rem 0.6rem;
    font: inherit;
}

form {
    margin: 1rem 0;
}

.footer-search {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    margin: 0 0 2.5rem;
    border-bottom: 2px solid rgba(70, 55, 65, 0.2);
    font-size: clamp(1.25rem, 3.5vw, 2rem);
}

.footer-search input {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.65rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--link-color);
}

.footer-search input::placeholder {
    color: #777;
    opacity: 1;
}

.footer-search button {
    flex: none;
    padding: 0.65rem 0;
    border: 0;
    background: transparent;
    color: rgba(70, 55, 65, 0.2);
    font-weight: 400;
    cursor: pointer;
}

.footer-search > button[type="submit"] {
    width: 1.25em;
    text-align: center;
}

/* Ein Fokuszeichen für die gesamte Suchzeile statt einzelner Rahmen. */
.footer-search:focus-within {
    border-bottom-color: var(--link-color);
}

.footer-search:focus-within .footer-search-icon {
    color: var(--link-color);
}

.footer-search :focus-visible {
    outline: none;
}

.footer-search input:not(:placeholder-shown) + button {
    color: var(--link-color);
}

/* Der native Löschen-Knopf rechts entfällt zugunsten des linken Buttons. */
.footer-search input::-webkit-search-cancel-button,
.footer-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

.footer-search-leading {
    display: flex;
    flex: 0 0 1.25em;
    align-items: center;
    justify-content: center;
    color: rgba(70, 55, 65, 0.2);
}

.footer-search-icon {
    position: relative;
    width: 0.55em;
    height: 0.55em;
    margin: -0.12em 0.15em 0 0;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.footer-search-icon::after {
    content: "";
    position: absolute;
    right: -0.25em;
    bottom: -0.1em;
    width: 0.3em;
    height: 3px;
    background: currentColor;
    transform: rotate(45deg);
}

.footer-search .footer-search-clear {
    padding: 0;
    width: 1.25em;
    color: var(--link-color);
    line-height: 1;
}

.footer-search .footer-search-clear:hover,
.footer-search .footer-search-clear:focus-visible {
    color: #000;
}

.footer-search-leading [hidden] {
    display: none;
}

/* ========================================================================== 
   Kleine Bildschirme: bis 40rem (640px bei Standardschriftgröße)
   ========================================================================== */

@media (max-width: 40rem) {
    blockquote {
        padding-left: 0;
        padding-right: 0;
    }

    input {
        max-width: 90%;
    }

    .header-main {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header-main .brand {
        flex-basis: 14rem;
    }

    .header-main nav {
        width: 100%;
        margin-top: 0.5rem;
    }

    .header-navigation {
        flex-basis: 100%;
    }
}

/* ========================================================================== 
   Mobiles Vollbildmenü: unter 48rem, passend zum einspaltigen Raster
   ========================================================================== */

.menu-toggle {
    display: none;
}

@media (max-width: 47.999rem) {
    .menu-ready .header-main .brand {
        /* Im Layout belassen, damit der Header beim Öffnen nicht zusammenfällt. */
        position: relative;
        z-index: 102;
        flex: 0 1 auto;
        width: min(60vw, 18rem);
    }

    .menu-ready .menu-toggle {
        position: relative;
        z-index: 103;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .menu-toggle span {
        position: absolute;
        width: 1.5rem;
        height: 2px;
        background: currentColor;
        transition: transform 220ms ease, opacity 160ms ease;
    }

    .menu-toggle span:first-child {
        transform: translateY(-0.45rem);
    }

    .menu-toggle span:last-child {
        transform: translateY(0.45rem);
    }

    .menu-open .menu-toggle span:first-child {
        transform: rotate(45deg);
    }

    .menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .menu-open .menu-toggle span:last-child {
        transform: rotate(-45deg);
    }

    .menu-toggle:focus-visible {
        outline: 2px solid var(--link-color);
        outline-offset: 0.15rem;
    }

    .menu-ready .header-navigation {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: safe center;
        box-sizing: border-box;
        margin: 0;
        padding: 9rem 1.5rem 2rem;
        overflow-y: auto;
        background-color: #faf9fb;
        background-image: url("paper-grain.svg");
        /* Deckender Hintergrund ohne Überblendung des Seiteninhalts. */
        visibility: hidden;
    }

    .menu-open .header-navigation {
        visibility: visible;
    }

    .menu-ready .header-primary {
        flex: none;
    }

    .menu-ready .header-primary nav {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.8rem;
        width: 100%;
        margin: 0;
        font-size: clamp(1.5rem, 5vw, 2.25rem);
        line-height: 1.2;
    }

    .menu-ready .header-navigation .subnav {
        flex: none;
        width: 100%;
        margin: 1.5rem 0 0;
        padding-top: 1rem;
        border-top: 1px solid #d8d2dc;
    }

    .menu-ready .subnav a {
        font-size: 1rem;
    }

    .menu-open,
    .menu-open body {
        overflow: hidden;
    }


}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle span,
    .menu-ready .header-navigation {
        transition: none;
    }
}