/*
 * FF Hausbruch: layout and components on top of Cassiopeia (asset template.user).
 * Fonts, colours and typography are in base.css, the blocks of the fixed pages in blocks.css.
 */

/* ---------- Skip link (index.php, error.php) ---------- */
.ff-skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .75rem 1rem;
    border-radius: var(--ff-radius-small);
    background: var(--ff-navy);
    color: var(--ff-surface);
    font-weight: 700;
    transform: translateY(-300%);
}

.ff-skip-link:focus {
    color: var(--ff-surface);
    transform: none;
}

#main-content:focus {
    outline: none;
}

/* ---------- Header: coat of arms and title left, menu right ---------- */
.container-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    padding: .625rem max(1.125rem, calc((100% - 1320px) / 2 + 1rem));
    background: var(--ff-surface);
    background-image: none;
    box-shadow: 0 1px 0 var(--ff-line);
    color: var(--ff-navy);
}

.container-header > .grid-child {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-header > .container-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-bottom: 0;
}

.container-header .navbar-brand {
    margin: 0;
    padding: 0;
    color: var(--ff-navy);
    font-size: 1rem;
}

/* Beats Cassiopeia's white ".container-header .navbar-brand a". A block (not inline) so no line box adds
   descender space below the coat of arms. */
.container-header .navbar-brand .brand-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--ff-navy);
    text-decoration: none;
}

.container-header .brand-logo img {
    width: auto;
    height: 2.5rem;
}

.ff-brand-title {
    max-width: 14rem;
    font: 700 1.1rem/1 var(--ff-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: normal;
}

@media (width < 400px) {
    .container-header .brand-logo img {
        height: 2.25rem;
    }

    .ff-brand-title {
        font-size: 1rem;
    }
}

/* ---------- Main menu (html/mod_menu/collapse-metismenu.php, collapses below 1200 px) ---------- */
.container-header nav {
    margin-top: 0;
}

/* The opened menu spans the whole header, not only the menu column. */
.container-header .navbar {
    position: static;
    justify-content: flex-end;
    padding: 0;
}

.container-header .navbar-toggler {
    padding: .5rem .75rem;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    background: var(--ff-surface);
    color: var(--ff-navy);
    font-size: 1.25rem;
    line-height: 1;
}

.container-header .mod-menu {
    color: var(--ff-navy);
}

.container-header .mod-menu > li > a {
    border-radius: 6px;
    color: var(--ff-navy);
    font-size: .90625rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.container-header .mod-menu > li > a:not(.ff-cta):hover {
    background: var(--ff-surface-sunk);
    color: var(--ff-navy);
}

.container-header .mod-menu > li.active > a:not(.ff-cta) {
    color: var(--ff-red);
}

.container-header .mod-menu > li > a.ff-cta {
    display: inline-block;
    padding: .5625rem 1rem;
    border-radius: 999px;
    background: var(--ff-red);
    color: var(--ff-surface);
    font-weight: 700;
}

.container-header .mod-menu > li > a.ff-cta:hover,
.container-header .mod-menu > li > a.ff-cta:focus-visible {
    background: var(--ff-red-dark);
    color: var(--ff-surface);
}

/* Cassiopeia's thin grey dotted focus ring is hardly visible on the white header. */
.container-header .metismenu.mod-menu .metismenu-item > a:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

/* Cassiopeia's white underline animation belongs to its dark header. */
.container-header .mod-menu > li::after {
    display: none;
}

@media (width < 1200px) {
    /* Coat of arms, title and menu button stay in one row; the title wraps instead. */
    .container-header {
        flex-wrap: nowrap;
    }

    /* The header is sticky, so a long menu scrolls in itself on low windows. */
    .container-header .navbar-collapse {
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: .25rem 1rem 1rem;
        border-bottom: 1px solid var(--ff-line);
        background: var(--ff-surface);
        box-shadow: 0 12px 24px rgb(20 28 38 / .12);
    }

    /* Cassiopeia lays the menu out as a row from 992 px on; collapsed it stays a list. */
    .container-header .mod-menu {
        flex-direction: column;
    }

    .container-header .mod-menu > li + li {
        margin-left: 0;
    }

    .container-header .mod-menu > li {
        border-bottom: 1px solid var(--ff-line);
    }

    .container-header .mod-menu > li:last-child {
        border-bottom: 0;
    }

    /* The items are flex containers (metismenu), so the links grow to the full width. */
    .container-header .mod-menu > li > a {
        display: block;
        flex-grow: 1;
        padding: .8rem .25rem;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li.active > a {
        text-decoration: none;
    }

    .container-header .mod-menu > li > a.ff-cta {
        display: block;
        margin: .75rem 0 .25rem;
        text-align: center;
    }
}

@media (width >= 1200px) {
    /* Cassiopeia pads the items as well; with the links' own padding the menu would not fit in one row. */
    .container-header .metismenu.mod-menu .metismenu-item {
        padding: 0;
    }

    .container-header .mod-menu {
        align-items: center;
        justify-content: flex-end;
        gap: .125rem;
    }

    .container-header .mod-menu > li + li {
        margin-left: 0;
    }

    .container-header .mod-menu > li > a:not(.ff-cta) {
        display: block;
        padding: .5625rem .625rem;
    }

    /* Straight underline under the active item (26.10.2026; was a hand-drawn, slightly bent stroke). */
    .container-header .mod-menu > li.active > a:not(.ff-cta) {
        position: relative;
    }

    .container-header .mod-menu > li.active > a:not(.ff-cta)::after {
        content: "";
        position: absolute;
        right: .5rem;
        bottom: .25rem;
        left: .5rem;
        height: 3px;
        border-radius: 3px;
        background: var(--ff-red);
        opacity: .7;
    }

    .container-header .mod-menu > li > a.ff-cta {
        margin-left: .375rem;
    }
}

/* ---------- Content column: at most 1200 px wide and centred ---------- */
.site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, calc((var(--ff-content-width) - 3rem) / 4))) [main-end] minmax(0, 1fr) [full-end];
}

/* Cassiopeia puts 1em above every block of the columns; the first one starts at the top (prototype: 24 px below
   the start page header, 12 px between a list and its "more" link). */
.container-component > :first-child,
.container-sidebar-right > :first-child {
    margin-top: 0;
}

.container-component > main + * {
    margin-top: .75rem;
}

/* The page heading starts 22 px below the header (prototype .s-main); Cassiopeia's message box always comes first. */
.container-component > main,
.container-component > .card {
    margin-top: 1.375rem;
}

.ff-home .container-component > main {
    margin-top: 0;
}

.ff-home .com-content-category-blog__items.blog-items {
    margin-bottom: 0;
}

/* Running text keeps a readable line length in the wide column; images, tables and blocks such as ff-tiles use the
   full width. Comes before the lead sentence, which is narrower still. */
.com-content-article__body > :is(p, ul, ol, dl, blockquote, h2, h3, h4, .ff-notice):not(:has(img, iframe, table)),
.com-content-category-blog .category-desc > :is(p, ul, ol):not(:has(img, iframe, table)),
.ff-card__teaser {
    max-width: var(--ff-measure);
}

/* Legal texts (privacy policy, wrapped in div.ff-legal) are looked up rather than read: full width of the column
   (26.10.2026). The rule above only reaches direct children of the article body. */
.ff-legal {
    max-width: none;
    overflow-wrap: anywhere;
}

/* Lead sentence below the page heading: introduction of an article, category description, view intro. */
.ff-lead,
.com-content-article__body > p:first-child,
.com-content-category-blog .category-desc > p:first-child {
    max-width: 60ch;
    color: var(--ff-muted);
}

/* Cassiopeia prints the description box on every blog, empty or not. */
.com-content-category-blog .category-desc:has(> *) {
    margin-bottom: 1.5rem;
}

/* The lead sentence of the description is followed by the filter bar ({loadmoduleid}, Task 8 of plan 3). */
.com-content-category-blog .category-desc > p:first-child:not(:last-child) {
    margin-bottom: 1.5rem;
}

.ff-lead {
    margin: -.125rem 0 1.5rem;
}

/* Sections of an article are 24 px apart (prototype .s-main gap). */
.com-content-article__body > h2:not(:first-child) {
    margin-top: 1.5rem;
}

/* Lists in articles get small red squares instead of dots (prototype .ticks). */
.com-content-article__body ul:not([class]) {
    display: grid;
    gap: .5rem;
    padding-left: 0;
    list-style: none;
}

.com-content-article__body ul:not([class]) > li {
    position: relative;
    padding-left: 1.375rem;
}

.com-content-article__body ul:not([class]) > li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: .125rem;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--ff-red);
}

/* Section heading above the posts on the start page (module "Startseite: Überschrift", position main-top). */
.ff-section-title {
    margin: 0 0 .75rem;
}

/* "All posts →" and similar links below a list. */
.ff-more {
    margin: 0;
    font-weight: 600;
}

/* ---------- Posts in category blogs (html/com_content/category/blog_item.php): one per row ---------- */
.com-content-category-blog__items.blog-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
    margin: 0 0 1.5rem;
}

/* Cassiopeia clips blog items; the focus ring of the post lies outside. */
.com-content-category-blog__items.blog-items > .blog-item {
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* Small photo left, text right (prototype .post). */
.ff-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    border-radius: 4px;
}

.ff-card--image {
    grid-template-columns: 7rem minmax(0, 1fr);
}

@media (width < 560px) {
    .ff-card--image {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }
}

.ff-card:focus-within {
    outline: 3px solid var(--ff-link);
    outline-offset: 4px;
}

.ff-card__image {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    background: var(--ff-surface-sunk);
}

.ff-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ff-card__body {
    min-width: 0;
}

.ff-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.ff-card__date {
    color: var(--ff-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.ff-card__title {
    margin: .25rem 0 .125rem;
    font: 700 1rem/1.3 var(--ff-font-body);
    letter-spacing: 0;
    text-transform: none;
}

.ff-card__title a {
    color: var(--ff-navy);
    text-decoration: none;
}

.ff-card:hover .ff-card__title a {
    text-decoration: underline;
}

/* The whole post is the link target; the focus ring is drawn around the post. */
.ff-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ff-card__title a:focus-visible {
    outline: none;
}

.ff-card__teaser {
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-card__teaser > * {
    margin-bottom: 0;
}

.ff-card__teaser a {
    position: relative;
    z-index: 1;
}

/* Start page: the cards look like those on "Aktuelles", small photo left, text right (26.10.2026; the photo on top was
   too big even at 2 / 1). Three side by side from 1024 px, where a third still leaves room for the text beside the
   photo; teaser cut after three lines. */
@media (width >= 1024px) {
    .ff-home .com-content-category-blog__items.blog-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.ff-home .ff-card__teaser {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* A post without intro image: a surface in the colour of its category (note of the category, as the label). */
.ff-card__image--placeholder {
    background: var(--ff-surface-sunk);
}

.ff-card__image--incident-report {
    background: var(--ff-tag-incident-report-bg);
}

.ff-card__image--training {
    background: var(--ff-tag-training-bg);
}

.ff-card__image--event {
    background: var(--ff-tag-event-bg);
}

.ff-card__image--news {
    background: var(--ff-tag-news-bg);
}

/* ---------- Post in a dialog (media/js/post-dialog.js, start page) ---------- */
html.ff-dialog-open {
    overflow: hidden;
}

.ff-post-dialog {
    width: min(47.5rem, calc(100% - 2rem));
    max-width: none;
    max-height: 90dvh;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--ff-radius);
    background: var(--ff-surface);
    color: var(--ff-navy);
    box-shadow: 0 1rem 3rem rgb(20 30 60 / .35);
}

.ff-post-dialog::backdrop {
    background: rgb(20 26 50 / .6);
}

.ff-post-dialog__close {
    position: sticky;
    top: .75rem;
    z-index: 1;
    float: right;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: .75rem .75rem 0 0;
    padding: .375rem .875rem;
    border: 1px solid var(--ff-line);
    border-radius: 999px;
    background: var(--ff-surface);
    color: var(--ff-navy);
    font-weight: 700;
    cursor: pointer;
}

.ff-post-dialog__close:hover {
    border-color: var(--ff-navy);
}

.ff-post-dialog__close:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

.ff-post-dialog__close > [aria-hidden] {
    font-size: 1.25rem;
    line-height: 1;
}

.ff-post-dialog__body {
    padding: 1.5rem;
}

.ff-post-dialog__body .com-content-article > .page-header h1 {
    margin-top: 0;
    padding-right: 7rem;
}

.ff-post-dialog__status {
    margin: 0;
    color: var(--ff-muted);
}

@media (width < 560px) {
    .ff-post-dialog {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .ff-post-dialog__body {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ff-post-dialog[open] {
        animation: ff-dialog-in .15s ease-out;
    }

    @keyframes ff-dialog-in {
        from {
            opacity: 0;
            transform: translateY(.5rem);
        }
    }
}

/* ---------- Photo strip as a slider, photos in a dialog (media/js/gallery.js; the strip itself: blocks.css) ---------- */
.ff-gallery--slider {
    position: relative;
    display: block;
    overflow: visible;
}

/* Two classes: Cassiopeia hides the overflow of every list in an article (.com-content-article ul), and the strip
   could then only be moved by the arrows, not by swiping. */
.ff-gallery > .ff-gallery__track {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ff-gallery__track > li {
    flex: none;
    margin: 0;
    scroll-snap-align: start;
}

.ff-gallery__photo {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: zoom-in;
}

.ff-gallery__photo img {
    display: block;
}

.ff-gallery__photo:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

.ff-gallery__nav {
    position: absolute;
    top: calc(50% - 1.25rem);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--ff-line);
    border-radius: 50%;
    background: var(--ff-surface);
    color: var(--ff-navy);
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 .25rem .75rem rgb(20 30 60 / .25);
    cursor: pointer;
}

.ff-gallery__nav--previous {
    left: .5rem;
}

.ff-gallery__nav--next {
    right: .5rem;
}

.ff-gallery__nav:hover {
    border-color: var(--ff-navy);
}

.ff-gallery__nav:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

.ff-gallery__nav[hidden],
.ff-lightbox__nav[hidden] {
    display: none;
}

/* The whole photo on a dark screen; horizontal swipes are left to the script (touch-action). */
.ff-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 3.75rem 1rem 1rem;
    border: 0;
    background: rgb(12 16 32 / .94);
    color: var(--ff-surface);
    touch-action: pan-y pinch-zoom;
}

.ff-lightbox::backdrop {
    background: transparent;
}

.ff-lightbox__figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: .75rem;
    height: 100%;
    margin: 0;
}

.ff-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    object-fit: contain;
}

.ff-lightbox__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
    max-width: var(--ff-measure);
    font-size: .9375rem;
    text-align: center;
}

.ff-lightbox__count {
    color: rgb(255 255 255 / .7);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ff-lightbox__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ff-lightbox__close > [aria-hidden] {
    font-size: 1.25rem;
    line-height: 1;
}

.ff-lightbox__nav {
    position: absolute;
    top: calc(50% - 1.5rem);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: 50%;
    background: rgb(0 0 0 / .4);
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.ff-lightbox__nav--previous {
    left: .75rem;
}

.ff-lightbox__nav--next {
    right: .75rem;
}

.ff-lightbox__close:hover,
.ff-lightbox__nav:hover {
    border-color: var(--ff-surface);
}

.ff-lightbox__close:focus-visible,
.ff-lightbox__nav:focus-visible {
    outline: 3px solid var(--ff-surface);
    outline-offset: 2px;
}

/* ---------- A post on its own page (html/com_content/article/default.php) ---------- */
.ff-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -.25rem 0 1.25rem;
}

.ff-post-meta__date {
    color: var(--ff-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* Half the width of the dialog, so the photo does not outweigh a short post (26.10.2026; was 40rem) */
.com-content-article > .item-image {
    float: none;
    max-width: 20rem;
    margin: 0 0 1.25rem;
}

.com-content-article > .item-image img {
    border: 1px solid var(--ff-line);
    border-radius: 8px;
}

/* ---------- Category labels (note of the category → ff-tag--<note>) ---------- */
.ff-tag {
    display: inline-block;
    padding: .3rem .5rem;
    border-radius: 4px;
    background: var(--ff-surface-alt);
    color: var(--ff-navy);
    font: 700 .75rem/1 var(--ff-font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-tag--incident-report {
    background: var(--ff-tag-incident-report-bg);
    color: var(--ff-tag-incident-report);
}

.ff-tag--training {
    background: var(--ff-tag-training-bg);
    color: var(--ff-tag-training);
}

.ff-tag--event {
    background: var(--ff-tag-event-bg);
    color: var(--ff-tag-event);
}

.ff-tag--news {
    background: var(--ff-tag-news-bg);
    color: var(--ff-tag-news);
}

/* Kind of an event (Minifeuerwehr; "Veranstaltung" uses ff-tag--event of the posts). */
.ff-tag--minis {
    background: var(--ff-tag-minis-bg);
    color: var(--ff-tag-minis);
}

/* Areas of events (EventArea of com_ffhausbruch; "general" has no label) */
.ff-tag--equipment {
    background: var(--ff-tag-equipment-bg);
    color: var(--ff-tag-equipment);
}

.ff-tag--technical_assistance {
    background: var(--ff-tag-technical-assistance-bg);
    color: var(--ff-tag-technical-assistance);
}

.ff-tag--fire_protection {
    background: var(--ff-tag-fire-protection-bg);
    color: var(--ff-tag-fire-protection);
}

.ff-tag--medical {
    background: var(--ff-tag-medical-bg);
    color: var(--ff-tag-medical);
}

.ff-tag--decontamination {
    background: var(--ff-tag-decontamination-bg);
    color: var(--ff-tag-decontamination);
}

/* ---------- Start page (menu item "Start" with page class ff-home, spec 5.1) ---------- */
/* Cassiopeia spans the banner over the full window width (class full-width); it belongs to the content columns. */
.site-grid > .container-banner {
    grid-column: main-start / main-end;
    margin-bottom: 0;
}

/* The sections of the start page (spec "Startseite erzählt von der Wehr" 2): Cassiopeia lines up the modules of a
   position from 992 px; facts and "who we are" (top-a) and minis and support (bottom-b) stand one below the other. */
.ff-home .container-top-a,
.ff-home .container-bottom-a,
.ff-home .container-bottom-b {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.ff-home .container-bottom-a {
    margin-top: 1rem;
}

.ff-home .container-top-a > *,
.ff-home .container-bottom-a > *,
.ff-home .container-bottom-b > * {
    flex: 0 0 auto;
    margin: 0;
}

/* Facts: two columns on phones, one row from 760 px. */
.ff-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    background: var(--ff-line);
}

.ff-facts__item {
    display: grid;
    gap: .125rem;
    padding: .875rem 1rem;
    background: var(--ff-surface);
}

.ff-facts__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.ff-facts__number {
    color: var(--ff-navy);
    font: 700 2rem/1 var(--ff-font-display);
    font-variant-numeric: tabular-nums;
}

.ff-facts__label {
    color: var(--ff-muted);
    font-size: .8125rem;
}

@media (width >= 760px) {
    .ff-facts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ff-facts__item:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* Who we are: text and the box about the history side by side from 760 px. */
.ff-about {
    display: grid;
    gap: 1.25rem;
}

.ff-about__text,
.ff-about__history {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.ff-about__text > *,
.ff-about__history > * {
    margin: 0;
}

.ff-about__history {
    gap: .375rem;
    padding: 1rem 1.125rem;
    border-radius: var(--ff-radius);
    background: var(--ff-surface-alt);
}

.ff-about__since {
    color: var(--ff-red);
    font: 700 .75rem/1.3 var(--ff-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (width >= 760px) {
    .ff-about {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Join us: a navy block with short answers, three steps and the next event for guests. */
.ff-join {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--ff-radius);
    background: var(--ff-navy);
    color: var(--ff-surface);
}

.ff-join h2 {
    margin: 0;
    color: var(--ff-surface);
}

.ff-join a {
    color: var(--ff-surface);
}

.ff-join__intro {
    display: grid;
    gap: .375rem;
}

/* Questions as headings in boxes: TinyMCE dissolves a definition list with div groups when the module is saved
   (26.10.2026), headings and paragraphs survive. */
.ff-join__faq {
    display: grid;
    gap: .75rem;
}

.ff-join__question {
    padding: .75rem 1rem;
    border: 1px solid rgb(255 255 255 / .3);
    border-radius: 8px;
}

.ff-join__question h3 {
    margin: 0;
    color: var(--ff-surface);
}

.ff-join__question p {
    margin: .125rem 0 0;
    font-size: .9375rem;
}

.ff-join__steps {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ff-step;
}

.ff-join__steps li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .625rem;
    align-items: center;
    font-weight: 600;
    counter-increment: ff-step;
}

.ff-join__steps li::before {
    content: counter(ff-step);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ff-red);
    color: var(--ff-surface);
    font: 700 1rem/1 var(--ff-font-display);
}

.ff-join__visit {
    display: grid;
    gap: .5rem;
    padding: 1rem 1.125rem;
    border-radius: 8px;
    background: var(--ff-surface);
    color: var(--ff-navy);
}

.ff-join__visit > * {
    margin: 0;
}

.ff-join__visit a {
    color: var(--ff-link);
}

.ff-join__visit-label {
    font: 700 1.125rem/1.2 var(--ff-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
}

@media (width >= 760px) {
    .ff-join {
        padding: 2rem;
    }

    .ff-join__faq {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-join__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Minifeuerwehr: a light box with the way from the minis to the active service. */
.ff-minis {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    background: var(--ff-surface-alt);
}

.ff-minis > * {
    margin: 0;
}

.ff-minis__path {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    font-weight: 600;
}

.ff-minis__path li {
    padding: .25rem .75rem;
    border: 1px solid var(--ff-line);
    border-radius: 999px;
    background: var(--ff-surface);
}

.ff-minis__path li + li::before {
    content: "→ ";
    color: var(--ff-muted);
}

/* Support: heading and three small cards, one below the other on phones. */
.ff-support {
    display: grid;
    gap: .75rem;
}

.ff-support > .ff-section-title {
    margin: 0;
}

.ff-support__cards {
    display: grid;
    gap: 1rem;
}

.ff-support__card {
    display: grid;
    gap: .5rem;
    align-content: start;
    padding: 1rem 1.125rem;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
}

.ff-support__card > * {
    margin: 0;
}

.ff-support__card h3 {
    font-size: 1.125rem;
}

.ff-support__card--thanks {
    background: var(--ff-surface-alt);
}

.ff-support__tip {
    color: var(--ff-muted);
    font-size: .875rem;
}

/* One column per card: the cards fill the width however many there are (the Förderverein card is out for now,
   26.10.2026). */
@media (width >= 760px) {
    .ff-support__cards {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
}

/* ---------- Filter bar on "Aktuelles" (menu module loaded into the category description, menu class ff-filter, spec 5.2) ---------- */
/* A menu module: Cassiopeia stacks .mod-menu items, the chips sit side by side. */
.ff-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-filter > li > a {
    display: inline-block;
    padding: .375rem .8125rem;
    border: 1px solid var(--ff-line);
    border-radius: 999px;
    background: var(--ff-surface);
    color: var(--ff-navy);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ff-filter > li > a:hover {
    border-color: var(--ff-navy);
}

/* Beats Cassiopeia's underline of active items in menu modules (.mod-list li.active > a). */
.ff-filter > li.active > a {
    text-decoration: none;
    border-color: var(--ff-navy);
    background: var(--ff-navy);
    color: var(--ff-surface);
}

/* ---------- Buttons ---------- */
.ff-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    border: 1px solid var(--ff-red);
    border-radius: 999px;
    background: var(--ff-red);
    color: var(--ff-surface);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

.ff-button:hover,
.ff-button:focus-visible {
    border-color: var(--ff-red-dark);
    background: var(--ff-red-dark);
    color: var(--ff-surface);
}

.ff-button--secondary {
    border-color: var(--ff-navy);
    background: var(--ff-surface);
    color: var(--ff-navy);
}

.ff-button--secondary:hover,
.ff-button--secondary:focus-visible {
    border-color: var(--ff-navy);
    background: var(--ff-navy);
    color: var(--ff-surface);
}

/* Cassiopeia's buttons (e.g. previous/next article) only get a faint grey glow on focus. */
.btn:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

/* ---------- Start page header (module "Startseite: Kopf" on banner, html/tinymce/hero.html) ---------- */
.ff-hero {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    margin: 1.375rem 0 1.5rem;
    padding: 1.375rem;
    border-radius: var(--ff-radius);
    background: var(--ff-surface-sunk);
}

.ff-hero__text {
    display: grid;
    gap: .625rem;
}

.ff-hero__text > * {
    margin: 0;
}

@media (width >= 768px) {
    .ff-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.ff-hero__kicker {
    color: var(--ff-red);
    font: 700 .75rem/1.3 var(--ff-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ff-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: .25rem;
}

.ff-hero__hours {
    color: var(--ff-muted);
    font-size: .9375rem;
}

.ff-hero__image {
    margin: 0;
}

.ff-hero__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    object-fit: cover;
}

/* ---------- Incidents (com_ffhausbruch, view incidents) ---------- */
.ff-incidents__years ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.ff-incidents__year {
    display: inline-block;
    padding: .375rem .8125rem;
    border: 1px solid var(--ff-line);
    border-radius: 999px;
    color: var(--ff-navy);
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.ff-incidents__year:hover {
    border-color: var(--ff-navy);
}

.ff-incidents__year[aria-current="page"] {
    border-color: var(--ff-navy);
    background: var(--ff-navy);
    color: var(--ff-surface);
}

.ff-incidents__count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 1rem;
    color: var(--ff-muted);
    font-size: .875rem;
    font-weight: 600;
}

.ff-incidents__number {
    color: var(--ff-navy);
    font: 700 3rem/1 var(--ff-font-display);
    font-variant-numeric: tabular-nums;
}

.ff-incidents__empty,
.ff-events__empty {
    padding: 1rem 1.25rem;
    border-radius: var(--ff-radius-small);
    background: var(--ff-surface-alt);
}

/* Only the table scrolls sideways on narrow screens, never the page. position: relative makes the
   wrapper the containing block of visually hidden (absolute) labels in the table, so they are clipped
   too; the hidden caption below the table must not add a vertical scrollbar. */
.ff-incidents__table-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--ff-line);
    border-radius: 10px;
}

.ff-incidents__table {
    width: 100%;
    min-width: 36rem;
    margin: 0;
    border-collapse: collapse;
    font-size: .875rem;
}

.ff-incidents__table th {
    padding: .5625rem .75rem;
    background: var(--ff-surface-sunk);
    color: var(--ff-muted);
    font: 700 .75rem/1.2 var(--ff-font-body);
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.ff-incidents__table td {
    padding: .5625rem .75rem;
    border-top: 1px solid var(--ff-line);
    vertical-align: top;
}

.ff-incidents__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ff-incidents__report {
    text-align: right;
    white-space: nowrap;
}

/* Keywords of the list as links to their explanation below (decision 5 of the autonomous work). */
.ff-incidents__keyword-link {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
}

.ff-incidents__keyword-link:hover {
    color: var(--ff-link);
}

.ff-keywords {
    max-width: var(--ff-measure);
    margin-top: 2rem;
}

.ff-keywords__heading {
    margin-bottom: .25rem;
}

.ff-keywords__intro {
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-keywords__list {
    display: grid;
    gap: .25rem;
    margin: 0;
}

.ff-keywords__entry {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: .75rem;
    padding: .375rem .5rem;
    border-radius: var(--ff-radius-small);
    font-size: .875rem;
    scroll-margin-top: calc(var(--ff-header-height) + 1rem);
}

.ff-keywords__entry:target {
    background: var(--ff-tag-news-bg);
}

.ff-keywords__entry dt {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ff-keywords__entry dd {
    margin: 0;
}

/* ---------- Events (com_ffhausbruch, view events, and module) ---------- */
.ff-events__list,
.ff-event-summary__list {
    display: grid;
    gap: .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.ff-event__sheet,
.ff-date {
    min-width: 3.375rem;
    padding: .3125rem .375rem .375rem;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    background: var(--ff-surface);
    font-family: var(--ff-font-display);
    text-align: center;
}

.ff-event__month,
.ff-date__month {
    display: block;
    color: var(--ff-red);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-event__day,
.ff-date__day {
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
}

.ff-event__body > * {
    margin: 0;
}

.ff-event__body > .ff-tag {
    margin-bottom: .25rem;
}

/* Month headings of the events page (h2 between the page heading and the events). */
.ff-events__heading {
    margin: 1.5rem 0 .75rem;
}

.ff-events__heading:first-of-type {
    margin-top: 0;
}

.ff-event__title {
    font: 700 1rem/1.3 var(--ff-font-body);
    letter-spacing: 0;
    text-transform: none;
}

.ff-event__time,
.ff-event__location,
.ff-event__description {
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-event__more {
    margin-top: .35rem;
}

/* ---------- Modules above the content and in the sidebar (chrome "card") ---------- */
/* Start page: incidents and events above the posts. Cassiopeia lines them up from 992 px (flex row, boxes of equal
   height) and stacks them below. */
.container-top-b {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.container-top-b > * {
    margin: 0;
}

.container-top-b .card,
.container-sidebar-right .card {
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    box-shadow: none;
}

.container-sidebar-right .card {
    margin-bottom: 1.5rem;
}

.ff-incident-summary,
.ff-event-summary {
    display: grid;
    gap: .625rem;
}

/* Both boxes alike: heading, three entries, link (the number of incidents stands in the heading). */
.ff-incident-summary__heading,
.ff-event-summary__heading {
    margin: 0 0 .125rem;
}

.ff-incident-summary__total {
    color: var(--ff-muted);
    font-variant-numeric: tabular-nums;
}

.ff-incident-summary__previous {
    margin: 0;
    color: var(--ff-muted);
    font-size: .875rem;
}

/* Start page boxes: both lists alike, a small date sheet and two lines beside it (incidents: kind · keyword, district;
   events: title with label, weekday and time). */
.ff-incident-summary__list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-incident-summary__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}

.ff-event-summary__list {
    gap: .5rem;
}

.ff-event--compact {
    align-items: center;
}

.ff-event--compact .ff-event__sheet,
.ff-incident-summary .ff-date {
    min-width: 2.875rem;
    padding: .1875rem .3125rem .25rem;
}

.ff-event--compact .ff-event__month,
.ff-incident-summary .ff-date__month {
    font-size: .6875rem;
}

.ff-event--compact .ff-event__day,
.ff-incident-summary .ff-date__day {
    font-size: 1.3125rem;
}

.ff-event__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem .5rem;
}

.ff-event--compact .ff-event__time {
    font-size: .8125rem;
}

.ff-incident-summary__body > * {
    margin: 0;
}

.ff-incident-summary__what {
    font-size: .9375rem;
}

.ff-incident-summary__type {
    font-weight: 700;
}

.ff-incident-summary__district {
    color: var(--ff-muted);
    font-size: .8125rem;
}

.ff-incident-summary__more,
.ff-event-summary__more {
    margin: 0;
    font-weight: 600;
}

.ff-event-summary__empty {
    margin: 0;
    color: var(--ff-muted);
}

/* ---------- Next event for guests (module mod_ffhausbruch_events, layout guest, inside the "join us" section) ---------- */
.ff-guest-event {
    display: grid;
    gap: .125rem;
    margin: 0;
}

.ff-guest-event__time {
    font: 700 1.25rem/1.2 var(--ff-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ff-guest-event__title {
    font-weight: 700;
}

.ff-guest-event__location,
.ff-guest-event--empty {
    color: var(--ff-muted);
    font-size: .9375rem;
}

/* ---------- Footer (footer menu and module "Fußzeile", html/tinymce/footer.html): light, one row ---------- */
.container-footer {
    margin-top: 2.125rem;
    border-top: 1px solid var(--ff-line);
    background: var(--ff-surface);
    background-image: none;
    color: var(--ff-muted);
    font-size: .8125rem;
}

.container-footer .grid-child {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .375rem 1.125rem;
    max-width: none;
    padding: .875rem max(1.25rem, calc((100% - 1320px) / 2 + 1rem)) 1.125rem;
}

.container-footer a,
.container-footer a:hover {
    color: var(--ff-muted);
    font-weight: 500;
}

/* Cassiopeia lightens footer links on hover (.footer a:not(.btn):hover: --gray-200), they almost vanish on the white
   footer; they turn dark instead. */
.container-footer a:not(.btn):is(:hover, :focus-visible) {
    color: var(--ff-navy);
}

/* Links are always underlined (spec 4.1); Cassiopeia takes the underline from menu modules (.mod-list li a). */
.container-footer .mod-list li a {
    text-decoration: underline;
}

/* Cassiopeia stacks menu items (flex-direction: column); in the footer they sit side by side. */
.container-footer .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .375rem 1.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-footer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem 1.125rem;
}

.ff-footer-info__emergency {
    margin: 0;
    color: var(--ff-navy);
    font-weight: 700;
}

.container-footer .ff-footer-info__emergency a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.ff-footer-info__social {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Vehicles (mod_ffhausbruch_vehicles on the page "Wehr"): cards like the former ff-vehicle blocks ---------- */
.ff-vehicle-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    margin: 0 0 1.5rem;
}

@media (width >= 576px) {
    .ff-vehicle-card--image {
        grid-template-columns: 12.5rem minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

.ff-vehicle-card__image {
    margin: 0;
}

.ff-vehicle-card__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--ff-line);
    border-radius: 8px;
    object-fit: cover;
}

.ff-vehicle-card__credit {
    margin-top: .25rem;
    color: var(--ff-muted);
    font-size: .75rem;
}

.ff-vehicle-card__heading {
    margin: 0 0 .125rem;
}

.ff-vehicle-card__call-sign {
    margin: 0 0 .25rem;
    color: var(--ff-red);
    font: 600 .8125rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.ff-vehicle-card__type {
    margin: 0 0 .375rem;
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-vehicle-card__federal {
    margin: 0 0 .5rem;
}

.ff-tag--federal {
    background: var(--ff-tag-equipment-bg);
    color: var(--ff-tag-equipment);
}

.ff-vehicle-card__description > :last-child {
    margin-bottom: .5rem;
}

.ff-vehicle-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .375rem 1rem;
    margin: 0 0 .5rem;
    font-size: .875rem;
}

.ff-vehicle-card__facts dt {
    color: var(--ff-muted);
    font-size: .75rem;
    font-weight: 600;
}

.ff-vehicle-card__facts dd {
    margin: 0;
}

.ff-vehicle-card__equipment-title {
    margin: 0 0 .125rem;
    color: var(--ff-muted);
    font-size: .75rem;
    font-weight: 600;
}

.ff-vehicle-card__equipment {
    margin: 0;
    padding-left: 1.125rem;
    font-size: .875rem;
}

.ff-vehicle-history__heading {
    margin: 2rem 0 .75rem;
}

/* Like the incident table: only the table scrolls sideways on narrow screens, never the page. */
.ff-vehicle-history {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--ff-line);
    border-radius: 10px;
}

.ff-vehicle-history__table {
    width: 100%;
    min-width: 40rem;
    margin: 0;
    border-collapse: collapse;
    font-size: .875rem;
}

.ff-vehicle-history__table thead th {
    padding: .5625rem .75rem;
    background: var(--ff-surface-sunk);
    color: var(--ff-muted);
    font: 700 .75rem/1.2 var(--ff-font-body);
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.ff-vehicle-history__table tbody :is(th, td) {
    padding: .5625rem .75rem;
    border-top: 1px solid var(--ff-line);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

.ff-vehicle-history__table tbody th {
    font-weight: 600;
}

.ff-vehicle-history__period {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------- Plan of the meetings of the minis (mod_ffhausbruch_events, mode "minis", page "Minis") ---------- */
.ff-minis-plan__list {
    display: grid;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.ff-minis-plan__item {
    padding: .625rem .875rem;
    border: 1px solid var(--ff-line);
    border-left: 4px solid var(--ff-tag-minis);
    border-radius: var(--ff-radius-small);
}

.ff-minis-plan__item > p {
    margin: 0;
}

.ff-minis-plan__time {
    color: var(--ff-tag-minis);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ff-minis-plan__title {
    font-weight: 700;
}

.ff-minis-plan__description,
.ff-minis-plan__location {
    color: var(--ff-muted);
    font-size: .875rem;
}

.ff-minis-plan__empty {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--ff-radius-small);
    background: var(--ff-surface-alt);
}