/*
|--------------------------------------------------------------------------
| Brand colors
|--------------------------------------------------------------------------
|
| Used by buttons, tags, links and accents. Keep in sync with the copies in
| kirby-nav-tsvwm/assets/css/nav.css (independent plugin) and index.css
| (panel previews).
|
*/

:root {
    --tsvwm-red: #e30512;
    --tsvwm-red-dark: #a90000;
    --tsvwm-black: #000;
    --tsvwm-grey-dark: #303030;
    --tsvwm-grey-light: #dddddd;
}

.tsvwm-accordion .accordion-button::after {
    display: none;
}

.tsvwm-accordion .accordion-button {
    position: relative;
    padding-right: 2.5rem;
}

.tsvwm-accordion-icon {
    display: inline-block;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: .9em;
    height: .9em;
    transform: translateY(-50%);
    transition: transform .3s ease;
}

.tsvwm-accordion-icon::before,
.tsvwm-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
}

.tsvwm-accordion-icon::before {
    width: 60%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.tsvwm-accordion-icon::after {
    width: 2px;
    height: 60%;
    transform: translate(-50%, -50%);
    transition: opacity .3s ease;
}

.accordion-button:hover .tsvwm-accordion-icon,
.accordion-button:not(.collapsed) .tsvwm-accordion-icon {
    transform: translateY(-50%) rotate(90deg);
}

.accordion-body > *:last-child {
    margin-bottom: 0;
}

/* No bottom margin after the last element in table cells — also nested,
   since blocks wrap their content (e.g. div.mb-4 > div.text-center > p).
   Bootstrap's spacing utilities (e.g. .mb-4) are !important, so this needs
   to be too — nothing else beats it on specificity alone. */
.table :is(td, th) > :last-child,
.table :is(td, th) > :last-child > :last-child,
.table :is(td, th) > :last-child > :last-child > :last-child {
    margin-bottom: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Corner cut
|--------------------------------------------------------------------------
|
| Bottom-right corner cut off at 45° — used on card images and the hero.
|
*/

.tsvwm-corner-cut {
    --tsvwm-corner-cut: 2rem;

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--tsvwm-corner-cut)),
        calc(100% - var(--tsvwm-corner-cut)) 100%,
        0 100%
    );
}

/*
|--------------------------------------------------------------------------
| Two-tone buttons (content buttons via snippets/button.php)
|--------------------------------------------------------------------------
|
| Rectangular button: dark part on the left, light part on the right with
| a 45° diagonal split. Built from background layers only — no clip-path
| or positioning — so .stretched-link (::after) and Bootstrap's focus ring
| keep working. On hover/focus the dark part moves right until it covers
| the whole button (same .3s ease as the nav underline).
|
*/

/* Registered as <number> so the hover movement can be transitioned */
@property --tsvwm-btn-split {
    syntax: '<number>';
    inherits: false;
    initial-value: .33;
}

.btn-tsvwm-primary,
.btn-tsvwm-secondary,
.btn-tsvwm-light {
    /* Diagonal width = button height → 45° split (single-line buttons) */
    --tsvwm-btn-slant: calc(
        var(--bs-btn-font-size) * var(--bs-btn-line-height)
        + 2 * var(--bs-btn-padding-y)
    );
    --tsvwm-btn-split: .33;

    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: transparent;

    background-repeat: no-repeat;
    background-image:
        /* light part, anchored right, with a 45° diagonal on its left edge
           (135deg gradient: the stop at slant / √2 runs from (slant, 0) to
           (0, height), i.e. "/"; 1px soft against aliasing) */
        linear-gradient(135deg,
            transparent calc(var(--tsvwm-btn-slant) * .7071 - .5px),
            var(--tsvwm-btn-light) calc(var(--tsvwm-btn-slant) * .7071 + .5px)),
        /* dark part, full size underneath */
        linear-gradient(var(--tsvwm-btn-dark), var(--tsvwm-btn-dark));
    /* The light part shrinks from (1 - split) × (width + slant) to 0 */
    background-size:
        calc((1 - var(--tsvwm-btn-split)) * (100% + var(--tsvwm-btn-slant))) 100%,
        100% 100%;
    background-position:
        right top,
        left top;
    transition: --tsvwm-btn-split .3s ease, box-shadow .15s ease-in-out;
}

.btn-tsvwm-primary {
    --tsvwm-btn-dark: var(--tsvwm-red-dark);
    --tsvwm-btn-light: var(--tsvwm-red);
    --bs-btn-focus-shadow-rgb: 227, 5, 18;
}

.btn-tsvwm-secondary {
    --tsvwm-btn-dark: var(--tsvwm-black);
    --tsvwm-btn-light: var(--tsvwm-grey-dark);
    --bs-btn-focus-shadow-rgb: 38, 38, 38;
}

/* Light variant for dark/red surfaces (e.g. teaser block): light grey on
   the left, white on the right, text black */
.btn-tsvwm-light {
    --tsvwm-btn-dark: var(--tsvwm-grey-light);
    --tsvwm-btn-light: #fff;
    --bs-btn-color: var(--tsvwm-black);
    --bs-btn-hover-color: var(--tsvwm-black);
    --bs-btn-active-color: var(--tsvwm-black);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-tsvwm-primary:hover,
.btn-tsvwm-primary:focus-visible,
.btn-tsvwm-secondary:hover,
.btn-tsvwm-secondary:focus-visible,
.btn-tsvwm-light:hover,
.btn-tsvwm-light:focus-visible {
    --tsvwm-btn-split: 1;
}

@media (prefers-reduced-motion: reduce) {
    .btn-tsvwm-primary,
    .btn-tsvwm-secondary,
    .btn-tsvwm-light {
        transition: none;
    }
}

/*
|--------------------------------------------------------------------------
| Teaser card (snippets/teaser-card.php)
|--------------------------------------------------------------------------
|
| Used by news and event items and the featured blocks. 16:9 preview image
| (same ratio as the cover field in the Panel) with an optional two-tone tag
| (e.g. department | date) sitting on its bottom edge — same 45° slant and
| colors as the primary button.
| The title link is stretched over the whole card.
|
*/

.tsvwm-teaser-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tsvwm-teaser-card-header {
    position: relative;
}

/* Same ratio as the cover field in the Panel (fields/cover.yml) */
.tsvwm-teaser-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.tsvwm-teaser-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

/* Department icon / site logo: uncropped, centered (padding in % of the
   width, so less vertically to fit the 16:9 height) */
.tsvwm-teaser-card-media.is-fallback img {
    object-fit: contain;
    padding: 10% 30%;
}

.tsvwm-teaser-card:hover .tsvwm-teaser-card-media img {
    transform: scale(1.04);
}

/*
| Two-tone tag (.tsvwm-tag): used on teaser cards, person cards and below
| the article headline. On cards it sits on the bottom edge of the image
| wrapper (see .tsvwm-tag-on-edge). Moves on hover only inside a teaser card.
*/

/* Registered as <number> so the hover movement can be transitioned */
@property --tsvwm-tag-split {
    syntax: '<number>';
    inherits: false;
    initial-value: .33;
}

.tsvwm-tag {
    --tsvwm-tag-dark: var(--tsvwm-red-dark);
    --tsvwm-tag-light: var(--tsvwm-red);
    --tsvwm-tag-slant: 2.1em; /* = tag height → 45° */
    --tsvwm-tag-split: .33;

    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    padding: .55em calc(var(--tsvwm-tag-slant) + .5em) .55em .9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Anton has a single weight (400); a bolder weight would be faked */
    font-family: 'Anton', var(--bs-font-sans-serif);
    font-weight: 400;
    font-size: .95rem;
    line-height: 1;
    color: #fff;

    /* Same look and hover movement as .btn-tsvwm-primary. The tag is not
       interactive, so the slanted edge is cut with clip-path instead of a
       separate background tile — no seam between rectangle and triangle. */
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--tsvwm-tag-slant)) 100%, 0 100%);
    background-color: var(--tsvwm-tag-light);
    background-repeat: no-repeat;
    background-image:
        /* dark part up to the diagonal */
        linear-gradient(var(--tsvwm-tag-dark), var(--tsvwm-tag-dark)),
        /* diagonal split */
        linear-gradient(to bottom right, var(--tsvwm-tag-dark) 50%, transparent calc(50% + 1px));
    background-size:
        calc(var(--tsvwm-tag-split) * (100% - var(--tsvwm-tag-slant)) + 1px) 100%,
        var(--tsvwm-tag-slant) 100%;
    background-position:
        left top,
        calc(var(--tsvwm-tag-split) * 100%) top;
    transition: --tsvwm-tag-split .3s ease;
}

/* On the bottom edge of an image wrapper (position: relative) */
.tsvwm-tag-on-edge {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    transform: translateY(50%);
}

.tsvwm-teaser-card:hover .tsvwm-tag,
.tsvwm-teaser-card:focus-within .tsvwm-tag,
.tsvwm-gallery-card:hover .tsvwm-tag,
.tsvwm-gallery-card:focus-visible .tsvwm-tag {
    --tsvwm-tag-split: 1;
}

.tsvwm-teaser-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-top: 1rem;
}

/* Room for the tag hanging over the image edge */
.tsvwm-teaser-card-body.has-tag {
    padding-top: 2rem;
}

.tsvwm-teaser-card-title {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.tsvwm-teaser-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.tsvwm-teaser-card:hover .tsvwm-teaser-card-title a {
    color: var(--tsvwm-red);
}

.tsvwm-teaser-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
}

.tsvwm-teaser-card-more {
    margin-top: auto;
    align-self: flex-end;
    font-weight: 600;
    color: var(--tsvwm-red);
}

/* Departments list: same icon zoom on hover as the teaser card image */
.tsvwm-departments-list-media {
    overflow: hidden;
}

.tsvwm-departments-list-media img {
    transition: transform .3s ease;
}

.tsvwm-departments-list-item:hover .tsvwm-departments-list-media img,
.tsvwm-departments-list-item:focus-visible .tsvwm-departments-list-media img {
    transform: scale(1.04);
}

/* Person card: name in the tag on the image edge */
.tsvwm-person-card-media {
    position: relative;
}

.tsvwm-person-card-body {
    padding-top: 2rem;
}

/* No portrait: site logo uncropped and centered, same format as photos */
.tsvwm-person-card-fallback {
    aspect-ratio: 3 / 4;
}

.tsvwm-person-card-fallback img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 30%;
}

@media (prefers-reduced-motion: reduce) {
    .tsvwm-departments-list-media img,
    .tsvwm-teaser-card-media img,
    .tsvwm-teaser-card-title a,
    .tsvwm-tag {
        transition: none;
    }
}

/*
|--------------------------------------------------------------------------
| Divider (snippets/blocks/divider.php)
|--------------------------------------------------------------------------
|
| Short centered accent line, 6px high, in the brand
| red. Vertical spacing comes from the spacer settings (see snippet).
| The same line sits left-aligned below the page title (.tsvwm-page-title).
|
*/

:root {
    --tsvwm-divider-width: 6rem;
    --tsvwm-divider-height: 6px;
}

.tsvwm-divider {
    width: var(--tsvwm-divider-width);
    height: var(--tsvwm-divider-height);
    margin: 0 auto;
    border: 0;
    background-color: var(--tsvwm-red);
    opacity: 1;
}

/* Page title set by the template (not via the grid layout): same spacing
   in every template, divider line left-aligned below the text */
.tsvwm-page-title {
    margin: 1.5rem 0 2.5rem;
    padding: 0;
}

/* Optional lead line below the title (e.g. author | date of an article,
   department | date | place of an event): the large gap moves below it */
.tsvwm-page-title:has(+ .tsvwm-page-lead) {
    margin-bottom: 1rem;
}

.tsvwm-page-lead {
    margin-bottom: 2.5rem;
}

.tsvwm-page-title::after {
    content: "";
    display: block;
    width: var(--tsvwm-divider-width);
    height: var(--tsvwm-divider-height);
    margin-top: .75rem;
    background-color: var(--tsvwm-red);
}

/* Writer wraps every list item in <p>: no paragraph gap inside lists.
   Multiple paragraphs within one item keep their spacing. */
li > p:last-child,
li > p:has(+ ul),
li > p:has(+ ol) {
    margin-bottom: 0;
}

/* Breadcrumb (snippets/breadcrumb.php): divider and current page in black */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--tsvwm-black);
    --bs-breadcrumb-item-active-color: var(--tsvwm-black);
}

/*
|--------------------------------------------------------------------------
| Department subnav (snippets/subnav.php)
|--------------------------------------------------------------------------
|
| Row of two-tone buttons above the page title (between header and h1), in
| a full-width white bar that sticks to the top of the viewport (below the
| header while that is sticky itself, offset set by subnav.js):
| inactive black/grey (.btn-tsvwm-secondary), active red (.btn-tsvwm-primary).
| One row on all breakpoints that scrolls horizontally (swipe, trackpad or
| the chevron buttons); a fade and a chevron on each edge while more items
| follow in that direction (classes .has-prev/.has-next set by
| assets/js/subnav.js; without JS no fades/chevrons).
|
*/

/* Sticky bar: below the main navigation's dropdowns (z-index 1000) and the
   sticky mobile header (1020); the contact dropdown stays above the content
   as part of the bar */
.tsvwm-subnav-bar {
    position: sticky;
    top: var(--tsvwm-sticky-top, 0px);
    z-index: 990;
    background-color: #fff;
}

/* Padding above (to the header) and below (to the page title, which adds
   its own top margin) */
.tsvwm-subnav {
    position: relative;
    padding-block: 1rem;
}

.tsvwm-subnav-list {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    list-style: none;
}

.tsvwm-subnav-list::-webkit-scrollbar {
    display: none;
}

.tsvwm-subnav-list .btn {
    white-space: nowrap;
}

/* Contact dropdown: plain panel in the site's square style */
.tsvwm-subnav-contact {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-width: 0;
    padding: .75rem 1rem;
    box-shadow: var(--bs-box-shadow);
    font-size: .875rem;
}

/* Fades on the edges as white overlays (not a mask on the list, which
   would also hide the contact dropdown) */
.tsvwm-subnav::before,
.tsvwm-subnav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.tsvwm-subnav::before {
    left: 0;
    background: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0));
}

.tsvwm-subnav::after {
    right: 0;
    background: linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0));
}

/* Chevrons on the fades: buttons that scroll the row (subnav.js), so a
   click doesn't hit the link below; the right one nudges twice on load */
.tsvwm-subnav-prev,
.tsvwm-subnav-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 2rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.tsvwm-subnav-prev {
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") no-repeat left center / 1.1rem;
}

.tsvwm-subnav-next {
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E") no-repeat right center / 1.1rem;
    animation: tsvwm-subnav-nudge .6s ease-in-out .6s 2;
}

/* Fade/chevron only towards an edge with more items */
.tsvwm-subnav.has-prev::before,
.tsvwm-subnav.has-next::after {
    opacity: 1;
}

.tsvwm-subnav.has-prev .tsvwm-subnav-prev,
.tsvwm-subnav.has-next .tsvwm-subnav-next {
    opacity: 1;
    pointer-events: auto;
}

@keyframes tsvwm-subnav-nudge {
    50% {
        background-position: calc(100% + .35rem) center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tsvwm-subnav-next {
        animation: none;
    }
}

/* Search toggle in the header (snippets/header.php → search modal) */
.tsvwm-search-toggle {
    color: var(--tsvwm-black);
    line-height: 1;
}

.tsvwm-search-toggle:hover,
.tsvwm-search-toggle:focus-visible {
    color: var(--tsvwm-red);
}

.tsvwm-search-toggle .tsvwm-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

/* Inline SVG icons (snippets/icon.php): sized and aligned like text */
.tsvwm-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

/* Training item (snippets/training-item.php): icon lines with hanging
   indent, so wrapped text stays aligned next to the icon */
.tsvwm-training-meta,
.tsvwm-meta {
    display: flex;
    gap: .35em;
    align-items: baseline;
}

.tsvwm-training-meta .tsvwm-icon,
.tsvwm-meta .tsvwm-icon {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: .2em;
}

/* Title: break long words with hyphenation instead of overflowing the
   cell (needs a lang attribute, set on the element) */
.tsvwm-training-title {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Small tag variant (e.g. department in training cells) */
.tsvwm-tag-sm {
    font-size: .7rem;
}

/* Black/grey tag, like .btn-tsvwm-secondary */
.tsvwm-tag-secondary {
    --tsvwm-tag-dark: var(--tsvwm-black);
    --tsvwm-tag-light: var(--tsvwm-grey-dark);
}

/* Training item, compact variant: the whole entry opens the detail popover */
.tsvwm-training-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tsvwm-training-toggle .tsvwm-training-title {
    transition: color .3s ease;
}

.tsvwm-training-toggle:hover .tsvwm-training-title,
.tsvwm-training-toggle[aria-expanded="true"] .tsvwm-training-title {
    color: var(--tsvwm-red);
}

.tsvwm-training-toggle:focus-visible {
    outline: 2px solid var(--tsvwm-red);
    outline-offset: 2px;
}

.tsvwm-training-popover-tip {
    --bs-popover-max-width: 320px;
}

.tsvwm-training-popover .tsvwm-training-meta + .tsvwm-training-meta {
    margin-top: .25rem;
}

.tsvwm-training-description > *:last-child {
    margin-bottom: 0;
}

/* Info icon: hints that the entry opens more details. Only the first line
   (tag or time) makes room for it, the rest uses the full width. */
.tsvwm-training-info + * {
    margin-right: 1.25rem;
}

.tsvwm-training-info {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--bs-secondary-color);
    transition: color .3s ease;
}

.tsvwm-training-toggle:hover .tsvwm-training-info,
.tsvwm-training-toggle[aria-expanded="true"] .tsvwm-training-info {
    color: var(--tsvwm-red);
}

/* Popover as dialog receives focus: visible focus ring for keyboard users */
.tsvwm-training-popover-tip:focus {
    outline: none;
}

.tsvwm-training-popover-tip:focus-visible {
    outline: 2px solid var(--tsvwm-red);
    outline-offset: 2px;
}

/*
|--------------------------------------------------------------------------
| Teaser block (snippets/blocks/teaser.php)
|--------------------------------------------------------------------------
|
| Grid with image (1/3 or 1/2) and text. The image's aspect ratio sets the
| minimum row height; longer text makes the row taller and the image fills
| it (align-self: stretch overrides the ratio, object-fit crops). Stacked
| on small screens.
|
*/

.tsvwm-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}


@media (min-width: 768px) {
    /* minmax(0, …): fixed column widths — otherwise the stretched image
       would derive a larger width from its aspect ratio */
    .tsvwm-teaser.has-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .tsvwm-teaser.has-image.is-wide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.tsvwm-teaser-media {
    position: relative;
    /* Stretched on both axes: fills its column minus the margins (spacing
       via Bootstrap classes in the snippet); the ratio then only sets the
       minimum height (when stretched taller, the ratio is ignored) */
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    aspect-ratio: var(--tsvwm-teaser-ratio, 4 / 3);
}

.tsvwm-teaser-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tsvwm-teaser-body {
    align-self: center;
}

.tsvwm-teaser-body > :last-child,
.tsvwm-teaser-text > :last-child {
    margin-bottom: 0;
}

/* Links in the writer text on the red surface */
.tsvwm-teaser-text a {
    color: #fff;
    text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Hero block (snippets/blocks/hero.php)
|--------------------------------------------------------------------------
|
| Image and content share one grid cell. The image's aspect ratio sets the
| minimum height; longer content makes the hero taller and the image fills
| it (object-fit crops) — the content never overflows.
|
*/

.tsvwm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.tsvwm-hero > * {
    grid-area: 1 / 1;
}

.tsvwm-hero-media {
    position: relative;
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    aspect-ratio: var(--tsvwm-hero-ratio, 16 / 9);
}

.tsvwm-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tsvwm-hero-content {
    position: relative;
    z-index: 1;
    align-self: stretch;
}

/* Icon lines in cards (e.g. location contact details) */
.tsvwm-meta + .tsvwm-meta {
    margin-top: .25rem;
}

/*
|--------------------------------------------------------------------------
| Small utilities (formerly inline styles)
|--------------------------------------------------------------------------
*/

/* Schedule tables (trainings block, timetable template) */
.schedule-table {
    table-layout: fixed;
    min-width: 800px;
}

.schedule-table-time {
    width: 60px;
    white-space: nowrap;
}

/* Age filter of the trainings block */
.tsvwm-filter-age {
    width: 100px;
}

/* Events calendar */
.tsvwm-calendar {
    table-layout: fixed;
}

/* Extra small label (e.g. department in calendar cells) */
.tsvwm-label-xs {
    font-size: .7em;
}

/* Departments list: square tile with the icon uncropped */
.tsvwm-departments-list-media {
    aspect-ratio: 1 / 1;
}

.tsvwm-departments-list-media img {
    max-height: 100%;
    object-fit: contain;
}

/* Zoom badge on images that open in the lightbox */
.tsvwm-image-zoom {
    top: .5rem;
    right: .5rem;
    padding: .4rem;
    background-color: var(--tsvwm-black);
}

/* datenliebe branding */
.tsvwm-branding-heart {
    color: #e6007e;
}