html,
body {
    min-height: 100%;
    color: var(--fc-text-body);
    background: var(--fc-bg-page);
}

body {
    overflow-x: hidden;
}

.portal-shell {
    margin: 0;
}

.portal-page {
    padding: 40px 0 36px;
}

.portal-main {
    width: min(1160px, calc(100% - 56px));
    margin: 0 auto;
    display: grid;
}

@media (max-width: 900px) {
    .portal-main {
        width: min(100% - 32px, 1160px);
    }

    .portal-page {
        padding: 28px 0 28px;
    }
}

@media (max-width: 768px) {
    .portal-main {
        width: min(100% - 28px, 1160px);
    }

    .portal-page {
        padding: 22px 0 20px;
    }
}

@media (max-width: 480px) {
    .portal-main {
        width: min(100% - 20px, 1160px);
    }

    .portal-page {
        padding: 18px 0 18px;
    }
}

/* Gastfischerportal: Navigation und Inhalt teilen eine Containerachse.
   Der äußere Seitenrahmen wird zurückgenommen, Breite und Gutter kommen aus
   fc-container, der vertikale Rhythmus aus der jeweiligen Seiten-CSS. */

.portal-page.portal-page--guest {
    padding: 0;
}

.portal-page--guest .portal-main {
    width: 100%;
}

/* Skip-Link */

.fc-skip-link {
    position: fixed;
    inset-block-start: var(--fc-space-2);
    inset-inline-start: var(--fc-space-2);
    z-index: var(--fc-z-toast);
    padding: var(--fc-space-3) var(--fc-space-4);
    color: var(--fc-text-primary);
    background: var(--fc-bg-surface);
    border: 1px solid var(--fc-border-focus);
    border-radius: var(--fc-radius-md);
    box-shadow: var(--fc-elev-2);
    font: var(--fc-text-label);
    transform: translateY(calc((100% + var(--fc-space-4)) * -1));
}

.fc-skip-link:focus {
    transform: translateY(0);
}

.fc-skip-link:focus-visible,
.fc-brandbar__brand:focus-visible {
    outline: 2px solid var(--fc-border-focus);
    outline-offset: 2px;
    box-shadow: var(--fc-focus-ring);
}

/* FcBrandBar – öffentliche Navigation */

.fc-brandbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--fc-z-sticky);
    background: var(--fc-bg-surface);
    border-block-end: 1px solid var(--fc-border-subtle);
    transition: box-shadow var(--fc-motion-fast) var(--fc-ease);
}

.fc-brandbar.is-scrolled {
    box-shadow: var(--fc-elev-1);
}

.fc-brandbar__content {
    min-block-size: var(--fc-space-16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-space-4);
}

.fc-brandbar__brand {
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--fc-space-3);
    color: var(--fc-text-primary);
    text-decoration: none;
    border-radius: var(--fc-radius-sm);
}

.fc-brandbar__brand:hover {
    color: var(--fc-text-primary);
}

.fc-brandbar__mark {
    inline-size: var(--fc-space-8);
    block-size: var(--fc-space-8);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--fc-on-dark-fg);
    background: var(--fc-bg-brand-field);
    border-radius: var(--fc-radius-sm);
}

.fc-brandbar__mark svg {
    inline-size: var(--fc-space-5);
    block-size: var(--fc-space-5);
}

.fc-brandbar__wordmark {
    min-inline-size: 0;
    display: grid;
    gap: 0;
}

.fc-brandbar__name {
    color: var(--fc-text-primary);
    font: var(--fc-text-label);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.fc-brandbar__descriptor {
    display: none;
    color: var(--fc-text-secondary);
    font: var(--fc-text-caption);
    white-space: nowrap;
}

.fc-brandbar__nav {
    display: none;
    align-items: center;
    gap: var(--fc-space-3);
}

.fc-brandbar__nav--always {
    display: flex;
}

.fc-brandbar__content--public-login {
    flex-wrap: wrap;
    padding-block: var(--fc-space-3);
}

.fc-brandbar__nav--public-login {
    inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fc-space-2);
}

.fc-brandbar__nav--public-login .fc-btn {
    min-inline-size: 0;
    justify-content: center;
}

.fc-brandbar__login-label-full {
    display: none;
}

.fc-brandbar__compact {
    display: flex;
    align-items: center;
    gap: var(--fc-space-2);
}

.fc-brandbar__menu {
    position: relative;
}

.fc-brandbar__menu summary {
    list-style: none;
}

.fc-brandbar__menu summary::-webkit-details-marker {
    display: none;
}

.fc-brandbar__menu-icon,
.fc-brandbar__menu-icon::before,
.fc-brandbar__menu-icon::after {
    inline-size: var(--fc-space-5);
    block-size: 2px;
    display: block;
    background: currentColor;
}

.fc-brandbar__menu-icon {
    position: relative;
}

.fc-brandbar__menu-icon::before,
.fc-brandbar__menu-icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.fc-brandbar__menu-icon::before {
    inset-block-start: calc(var(--fc-space-2) * -1);
}

.fc-brandbar__menu-icon::after {
    inset-block-end: calc(var(--fc-space-2) * -1);
}

.fc-brandbar__menu-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--fc-space-2));
    inset-inline-end: 0;
    inline-size: calc(100vw - (var(--fc-gutter) * 2));
    max-inline-size: var(--fc-container-narrow);
    display: grid;
    gap: var(--fc-space-3);
    box-shadow: var(--fc-elev-2);
}

.fc-brandbar__menu-panel .fc-btn,
.fc-brandbar__menu-panel .fc-brandbar__form {
    inline-size: 100%;
}

/* Rückweg auf der Anmeldeseite: ruhiger Navigationslink, optisch an der
   Containerkante ausgerichtet (der Innenabstand wird zurückgenommen). */
.fc-brandbar__back {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--fc-space-2);
    padding-inline: var(--fc-space-2);
    margin-inline-end: calc(var(--fc-space-2) * -1);
    color: var(--fc-text-secondary);
    font: var(--fc-text-label);
    text-decoration: none;
    border-radius: var(--fc-radius-sm);
    transition: color var(--fc-motion-fast) var(--fc-ease);
}

.fc-brandbar__back:hover {
    color: var(--fc-action-quiet-fg);
}

.fc-brandbar__back:focus-visible {
    outline: 2px solid var(--fc-border-focus);
    outline-offset: 2px;
    box-shadow: var(--fc-focus-ring);
}

.fc-brandbar__back svg {
    inline-size: var(--fc-space-4);
    block-size: var(--fc-space-4);
    flex: 0 0 auto;
}

.fc-brandbar__user {
    max-inline-size: 32ch;
    color: var(--fc-text-secondary);
    font: var(--fc-text-sm);
    overflow-wrap: anywhere;
}

.fc-brandbar__form {
    margin: 0;
}

/* FcPortalNav – Bereichsnavigation des angemeldeten Gastfischerportals.
   Ein Markup für alle Breiten: unter lg liegt die Navigation im aufklappbaren
   Menü, ab lg in der Kopfzeile. Ohne JavaScript bleibt das Menü offen und damit
   bedienbar; das Skript setzt den eingeklappten Zustand erst beim Start. */

.fc-navbar__toggle {
    inline-size: 44px;
    block-size: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--fc-text-primary);
    background: var(--fc-bg-surface);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--fc-motion-fast) var(--fc-ease), border-color var(--fc-motion-fast) var(--fc-ease);
}

.fc-navbar__toggle:hover,
.fc-navbar__toggle[aria-expanded="true"] {
    background: var(--fc-bg-hover);
    border-color: var(--fc-border-strong);
}

.fc-navbar__toggle-icon,
.fc-navbar__toggle-icon::before,
.fc-navbar__toggle-icon::after {
    inline-size: var(--fc-space-5);
    block-size: 2px;
    display: block;
    background: currentColor;
}

.fc-navbar__toggle-icon {
    position: relative;
}

.fc-navbar__toggle-icon::before,
.fc-navbar__toggle-icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.fc-navbar__toggle-icon::before {
    inset-block-start: calc(var(--fc-space-2) * -1);
}

.fc-navbar__toggle-icon::after {
    inset-block-end: calc(var(--fc-space-2) * -1);
}

.fc-navbar {
    display: grid;
    gap: var(--fc-space-1);
    padding: var(--fc-space-3) var(--fc-gutter) var(--fc-space-4);
    background: var(--fc-bg-surface);
    border-block-end: 1px solid var(--fc-border);
}

/* Erst mit aktivem Skript wird das Menü zur überlagernden Fläche. Ohne
   JavaScript steht es im Textfluss und verdeckt keinen Inhalt. */
.portal-ready .fc-navbar {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: var(--fc-z-dropdown);
    box-shadow: var(--fc-elev-2);
}

.fc-navbar[hidden] {
    display: none;
}

.fc-navbar__links {
    display: grid;
    gap: var(--fc-space-1);
}

.fc-navbar__link {
    position: relative;
    min-block-size: 48px;
    display: flex;
    align-items: center;
    padding-inline: var(--fc-space-3);
    color: var(--fc-text-body);
    border-radius: var(--fc-radius-md);
    font: var(--fc-type-body);
    font-weight: 600;
    text-decoration: none;
    touch-action: manipulation;
    transition: color var(--fc-motion-fast) var(--fc-ease), background-color var(--fc-motion-fast) var(--fc-ease);
}

.fc-navbar__link:hover {
    color: var(--fc-text-primary);
    background: var(--fc-bg-hover);
}

.fc-navbar__link[aria-current="page"] {
    color: var(--fc-text-primary);
    background: var(--fc-bg-selected);
}

/* Akzentkante wie die Statuskante des FcAlert: eine Marke, kein zweiter Effekt. */
.fc-navbar__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: var(--fc-space-2);
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--fc-action-bg);
    border-radius: var(--fc-radius-pill);
}

.fc-navbar__user {
    padding-block-start: var(--fc-space-3);
    margin-block-start: var(--fc-space-2);
    border-block-start: 1px solid var(--fc-border-subtle);
}

.fc-navbar__account {
    inline-size: 100%;
    min-block-size: 48px;
    display: flex;
    align-items: center;
    gap: var(--fc-space-3);
    padding: var(--fc-space-2) var(--fc-space-3);
    color: var(--fc-text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fc-radius-md);
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--fc-motion-fast) var(--fc-ease), border-color var(--fc-motion-fast) var(--fc-ease);
}

.fc-navbar__account:hover,
.fc-navbar__account[aria-expanded="true"],
.fc-navbar__account.is-active {
    background: var(--fc-bg-hover);
    border-color: var(--fc-border);
}

.fc-navbar__avatar {
    inline-size: var(--fc-space-8);
    block-size: var(--fc-space-8);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--fc-text-secondary);
    background: var(--fc-bg-surface-sunken);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-pill);
    font: var(--fc-text-caption);
    font-weight: 600;
}

.fc-navbar__identity {
    min-inline-size: 0;
    display: grid;
}

.fc-navbar__account-name {
    color: var(--fc-text-primary);
    font: var(--fc-text-label);
    overflow-wrap: anywhere;
}

.fc-navbar__account-role {
    color: var(--fc-text-secondary);
    font: var(--fc-text-caption);
}

.fc-navbar__chevron {
    inline-size: var(--fc-space-2);
    block-size: var(--fc-space-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
    border-inline-end: 2px solid var(--fc-text-secondary);
    border-block-end: 2px solid var(--fc-text-secondary);
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--fc-motion-fast) var(--fc-ease);
}

.fc-navbar__account[aria-expanded="true"] .fc-navbar__chevron {
    transform: translateY(25%) rotate(-135deg);
}

.fc-navbar__menu {
    display: grid;
    gap: var(--fc-space-1);
    padding-block-start: var(--fc-space-1);
}

.fc-navbar__menu[hidden] {
    display: none;
}

.fc-navbar__menu .fc-brandbar__form {
    inline-size: 100%;
}

.fc-navbar__menu-link {
    min-block-size: 44px;
    display: flex;
    align-items: center;
    padding-inline: var(--fc-space-3);
    color: var(--fc-text-body);
    border-radius: var(--fc-radius-sm);
    font: var(--fc-text-label);
    text-decoration: none;
    touch-action: manipulation;
    transition: color var(--fc-motion-fast) var(--fc-ease), background-color var(--fc-motion-fast) var(--fc-ease);
}

.fc-navbar__menu-link:hover {
    color: var(--fc-text-primary);
    background: var(--fc-bg-hover);
}

.fc-navbar__menu-link[aria-current="page"] {
    color: var(--fc-text-primary);
    background: var(--fc-bg-selected);
}

.fc-navbar__menu-action {
    inline-size: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.fc-navbar__toggle:focus-visible,
.fc-navbar__link:focus-visible,
.fc-navbar__account:focus-visible,
.fc-navbar__menu-link:focus-visible {
    outline: 2px solid var(--fc-border-focus);
    outline-offset: 2px;
    box-shadow: var(--fc-focus-ring);
}

@media (min-width: 480px) {
    .fc-brandbar__login-label-short {
        display: none;
    }

    .fc-brandbar__login-label-full {
        display: inline;
    }

    .fc-brandbar__mark {
        inline-size: var(--fc-space-10);
        block-size: var(--fc-space-10);
        border-radius: var(--fc-radius-md);
    }

    .fc-brandbar__mark svg {
        inline-size: var(--fc-space-6);
        block-size: var(--fc-space-6);
    }

    .fc-brandbar__name {
        font: var(--fc-text-h3);
        letter-spacing: -.01em;
    }

    .fc-brandbar__descriptor {
        display: block;
    }
}

@media (min-width: 768px) {
    .fc-brandbar__content {
        gap: var(--fc-space-6);
    }

    .fc-brandbar__content--public-login {
        flex-wrap: nowrap;
        padding-block: 0;
    }

    .fc-brandbar__nav {
        display: flex;
    }

    .fc-brandbar__nav--public-login {
        inline-size: auto;
    }

    .fc-brandbar__compact {
        display: none;
    }
}

/* FcPortalNav ab lg: aus dem Menü wird die Kopfzeilennavigation (§24: die
   angemeldete Navigation wird erst ab lg einzeilig). Der Navigationsknoten
   bleibt derselbe, nur Position und Rhythmus ändern sich. */

@media (min-width: 1024px) {
    .fc-brandbar--portal .fc-brandbar__content {
        gap: var(--fc-space-4);
    }

    .fc-navbar__toggle {
        display: none;
    }

    .fc-navbar,
    .fc-navbar[hidden] {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-inline-size: 0;
        gap: var(--fc-space-4);
        padding: 0;
        background: transparent;
        border: 0;
    }

    .portal-ready .fc-navbar {
        position: static;
        z-index: var(--fc-z-base);
        box-shadow: none;
    }

    .fc-navbar__links {
        display: flex;
        align-items: center;
        gap: var(--fc-space-1);
        margin-inline-start: var(--fc-space-4);
    }

    .fc-navbar__link {
        min-block-size: var(--fc-space-12);
        padding-inline: var(--fc-space-3);
        color: var(--fc-text-secondary);
        border-radius: var(--fc-radius-sm);
        white-space: nowrap;
    }

    .fc-navbar__link:hover {
        background: transparent;
    }

    .fc-navbar__link[aria-current="page"] {
        background: transparent;
    }

    .fc-navbar__link[aria-current="page"]::before {
        inset-block: auto 0;
        inset-inline: var(--fc-space-3);
        inline-size: auto;
        block-size: 2px;
    }

    .fc-navbar__user {
        position: relative;
        padding: 0;
        margin-inline-start: auto;
        margin-block-start: 0;
        border: 0;
    }

    .fc-navbar__account {
        inline-size: auto;
        min-block-size: var(--fc-space-12);
    }

    .fc-navbar__menu {
        position: absolute;
        inset-block-start: calc(100% + var(--fc-space-2));
        inset-inline-end: 0;
        z-index: var(--fc-z-dropdown);
        min-inline-size: 240px;
        padding: var(--fc-space-2);
        background: var(--fc-bg-surface);
        border: 1px solid var(--fc-border);
        border-radius: var(--fc-radius-md);
        box-shadow: var(--fc-elev-2);
    }

    .fc-navbar__identity {
        max-inline-size: 20ch;
    }
}

@media (min-width: 1280px) {
    .fc-navbar__links {
        gap: var(--fc-space-2);
        margin-inline-start: var(--fc-space-6);
    }

    .fc-navbar__link {
        padding-inline: var(--fc-space-4);
    }

    .fc-navbar__link[aria-current="page"]::before {
        inset-inline: var(--fc-space-4);
    }

    .fc-navbar__identity {
        max-inline-size: 28ch;
    }
}

/* Öffentlicher Footer */

.portal-footer {
    padding-block: var(--fc-space-12);
    background: var(--fc-bg-surface);
    border-block-start: 1px solid var(--fc-border-subtle);
}

.portal-footer__content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fc-space-4);
    color: var(--fc-text-secondary);
    font: var(--fc-text-sm);
}

.portal-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fc-space-2);
    margin: 0;
}

.portal-footer__divider {
    color: var(--fc-text-muted);
}

.portal-footer__link {
    color: var(--fc-text-link);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: var(--fc-space-1);
}

.portal-footer__link:hover {
    color: var(--fc-text-link-hover);
    text-decoration: underline;
}

.portal-footer__link:focus-visible {
    outline: 2px solid var(--fc-border-focus);
    outline-offset: 2px;
    box-shadow: var(--fc-focus-ring);
    border-radius: var(--fc-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
    .fc-brandbar,
    .fc-brandbar__back {
        transition: none;
    }
}