/* ============================================================
   MinuConcrete Theme – minu_theme.css
   Newspaper layout with rainbow accent elements
   Concrete CMS 9.x
   ============================================================ */

/* ── eingebettete fonts ─────────────────────────────────────────────── */

   @font-face {
       font-family: 'Gambarino';
       src: url('fonts/Gambarino-Regular.woff2') format('woff2');
       font-weight: 300;
       font-style: normal;
       font-display: swap;
   }

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --font-serif:   'Gambarino', Georgia, 'Times New Roman', serif;
    --font-text:    Georgia, 'Times New Roman', serif;
    --font-sans:    'Helvetica Neue', Arial, sans-serif;
    --color-ink:    #666666;  /* headings, nav, UI: Pencil Grey */
    --color-text:   #333333;  /* running text: 12.1:1 on paper, for an older readership */
    --color-paper:  #fafaf8;
    --color-rule:   #222222;
    --color-muted:  #666666;
    --color-border: #dddddd;

    /* Type roles, sized for an older readership: nothing a reader has to
       read goes below 13px, running text starts at 17px. */
    --fs-label:   0.8125rem;                  /* uppercase category labels, tags */
    --fs-meta:    0.875rem;                   /* dates, breadcrumb, footer, captions */
    --fs-ui:      1rem;                       /* navigation, read-more, controls */
    --fs-body:    1.0625rem;                  /* site text, card excerpts */
    --fs-article: 1.125rem;                   /* article text */
    --fs-section: clamp(1.6rem, 2.6vw, 2.1rem); /* section headings */
    --fs-lead:    clamp(1.9rem, 3.4vw, 2.6rem); /* lead-story title */

    /* Rainbow accent palette */
    --rainbow-red:    #e63946;
    --rainbow-orange: #f4a261;
    --rainbow-yellow: #e9c46a;
    --rainbow-green:  #2a9d8f;
    --rainbow-blue:   #457b9d;
    --rainbow-indigo: #4361ee;
    --rainbow-violet: #7209b7;

    /* Text-safe rainbow shades: same hues, darkened to reach at least
       4.5:1 on --color-paper. Use these whenever a rainbow colour sets
       text (links, labels, tags); the vivid values above stay for lines. */
    --rainbow-red-text:    #c1272f;
    --rainbow-orange-text: #a8521a;
    --rainbow-yellow-text:  #82650a;
    --rainbow-green-text:   #1d7369;
    --rainbow-blue-text:   #3a6a89;
    --rainbow-indigo-text: #0056A5;
    --rainbow-violet-text: #6E2E77;

    /* Form-field outline: the lightest grey that still reaches 3:1. */
    --color-field-border: #8a8a8a;

    /* The site's single divider-line style: a thin, vivid rainbow gradient,
       used everywhere instead of plain black/grey rule lines. */
    --line-red:    #ff0000;
    --line-orange: #ff8c00;
    --line-yellow:  #F1BC20;
    --line-green:   #21B20C;
    --line-blue:   #1D71B8;
    --line-indigo: #0056A5;
    --line-violet: #6E2E77;
    --rainbow-line: linear-gradient(
        to right,
        var(--line-red),
        var(--line-orange),
        var(--line-yellow),
        var(--line-green),
        var(--line-blue),
        var(--line-indigo),
        var(--line-violet)
    );
}

/* ── Rubrikenfarben (series colours) ─────────────────────────────
   Every series owns the rainbow colour of its place in the Rubriken
   Index (Glossen red, Mimpfeli orange, …). Any element with data-hue
   gets --hue (the vivid line colour, for lines and bars) and --hue-text
   (darkened just enough for text on the paper and white backgrounds,
   at least 4.6:1). Set by templates from the page tree. ─────────── */
[data-hue="0"] { --hue: var(--line-red);    --hue-text: #e60000; }
[data-hue="1"] { --hue: var(--line-orange); --hue-text: #ab5e00; }
[data-hue="2"] { --hue: var(--line-yellow); --hue-text: #7d7300; }
[data-hue="3"] { --hue: var(--line-green);  --hue-text: #128412; }
[data-hue="4"] { --hue: var(--line-blue);   --hue-text: #006fde; }
[data-hue="5"] { --hue: var(--line-indigo); --hue-text: #4b0082; }
[data-hue="6"] { --hue: var(--line-violet); --hue-text: #9400d3; }

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding-top keeps anything scrolled to (a focused link, an anchor)
   clear of the sticky header, which is 116–187px tall depending on width. */
html { scroll-behavior: smooth; scroll-padding-top: 12.5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Skip link: hidden until it receives keyboard focus, then a Press Black tab
   at the top left, above the sticky header. */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background: var(--color-rule);
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    color: var(--color-paper);
    text-decoration: none;
}

body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-paper);
}

/* Gambarino exists in one weight (300). Bootstrap sets headings to 500,
   which makes the browser fake a bold; pin every heading to the real weight. */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-serif);
    font-weight: 300;
    color: var(--color-ink);
    text-wrap: balance;
}

p, li, blockquote { text-wrap: pretty; }

a { color: var(--rainbow-blue-text); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; color: var(--color-ink); }

/* Browser surfaces in the site's own colours */
::selection { background: var(--rainbow-violet); color: var(--color-paper); }
html { accent-color: var(--rainbow-violet); caret-color: var(--rainbow-violet); }

:focus-visible {
    outline: 2px solid var(--rainbow-violet);
    outline-offset: 3px;
}

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

/* ── Horizontal rule (core "Horizontal Rule" block + any other <hr>) ──
   Same thin rainbow line used everywhere else on the site. ────────── */
/* Same as the line between the logo and the menu: 2px, full colour
   (Bootstrap would draw an <hr> at 25 % opacity). */
hr {
    height: 2px;
    border: none;
    background: var(--rainbow-line);
    opacity: 1;
    color: transparent;
    margin: 1.5rem 0;
}

/* ── Layout ─────────────────────────────────────────────────── */
.site-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Header: logo row above a full-width section bar, sticky ───
   Desktop: logo on top, the sections spread across the column below,
   each with its own rainbow hue as a 4px underline on hover / active.
   Phones: logo + "Menü" button; the sections open as a list with a
   small square in each section's hue. ────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-paper);
    padding: 1rem 0 1rem;
}

/* The rainbow line sits between the logo / site name and the menu. */
.site-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    background: var(--rainbow-line) left bottom / 100% 2px no-repeat;
}

.site-header .site-logo {
    height: 77px;
    width: auto;
}

/* Logo and site name side by side (desktop); stacked on phones. */
.site-header .site-name {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: -0.5px;
    color: var(--color-ink);
    text-decoration: none;
    line-height: 1;
}

@media (max-width: 768px) {
    .site-header .site-name {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

.site-header .site-tagline {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.25rem;
}

/* ── Section bar (main navigation) ──────────────────────────── */
.site-nav {
    margin-top: 0.6rem;
}

/* Desktop: always visible, regardless of Bootstrap's collapse state.
   The six sections need about 940px in one row, so the bar starts at 992px;
   below it the "Menü" button takes over (see the max-width: 991.98px block). */
@media (min-width: 992px) {
    .site-nav.collapse {
        display: block;
    }
}

.site-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1.75rem;
}

.site-nav-list > li > a {
    position: relative;
    display: block;
    padding: 0.6rem 0 0.35rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
    text-decoration: none;
    transition: color 0.15s;
}

/* Each section carries its own rainbow hue (cycled in nav order). */
.site-nav-list > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--hue, var(--rainbow-red));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-nav-list > li:nth-child(7n+1) > a { --hue: var(--rainbow-red); }
.site-nav-list > li:nth-child(7n+2) > a { --hue: var(--rainbow-orange); }
.site-nav-list > li:nth-child(7n+3) > a { --hue: var(--rainbow-yellow); }
.site-nav-list > li:nth-child(7n+4) > a { --hue: var(--rainbow-green); }
.site-nav-list > li:nth-child(7n+5) > a { --hue: var(--rainbow-blue); }
.site-nav-list > li:nth-child(7n+6) > a { --hue: var(--rainbow-indigo); }
.site-nav-list > li:nth-child(7n)   > a { --hue: var(--rainbow-violet); }

.site-nav-list > li > a:hover,
.site-nav-list > li.nav-selected > a {
    color: var(--color-rule);
}

.site-nav-list > li > a:hover::after,
.site-nav-list > li.nav-selected > a::after {
    transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-list > li > a::after {
        transition: none;
    }
}

/* ── Dropdown submenus ───────────────────────────────────────── */
.site-nav-list li.has-dropdown {
    position: relative;
}

.site-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    z-index: 200;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.site-nav .dropdown-menu li a {
    display: block;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--color-ink);
    text-decoration: none;
}

.site-nav .dropdown-menu li a:hover {
    background: #f3f3f3;
    color: var(--rainbow-red-text);
}

.site-nav-list li.has-dropdown:hover > .dropdown-menu,
.site-nav-list li.has-dropdown:focus-within > .dropdown-menu,
.site-nav-list li.has-dropdown.open > .dropdown-menu {
    display: block;
}

/* ── "Menü" button (phones only) ─────────────────────────────── */
.site-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    /* Same fixed box as "Suchen", so both buttons line up exactly. */
    box-sizing: border-box;
    height: 44px;
    padding: 0 0.95rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--color-rule);
    border-radius: 0;
    color: var(--color-rule);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.site-menu-toggle:hover,
.site-menu-toggle[aria-expanded="true"] {
    background: var(--color-rule);
    color: var(--color-paper);
}

/* Right side of the logo bar: "Suchen" (always), "Menü" (below 992px). */
.site-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* "Suchen": a labelled, square outlined button like "Menü". */
.site-search-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    height: 44px;
    padding: 0 0.95rem;
    border: 1px solid var(--color-rule);
    color: var(--color-rule);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.site-search-link:hover,
.site-search-link[aria-current="page"] {
    background: var(--color-rule);
    color: var(--color-paper);
}

.site-search-icon {
    flex-shrink: 0;
}

.site-menu-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.site-menu-bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
}

/* ── Main content area ──────────────────────────────────────── */
.site-content {
    padding: 2rem 0;
}

/* ── Article / Card grid ────────────────────────────────────── */
.article-grid {
    display: grid;
    /* min(280px, 100%): in a narrow container column (col-md-4 at 768–900px,
       col-md-3) the track shrinks to the column instead of spilling into the
       next one. */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    column-gap: 2rem;
    row-gap: 3.5rem;
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

/* ── Lead story (page_list template "article_grid_lead") ─────
   The first entry spans the row: image on the left, larger title and
   excerpt beside it. The rest follow two-up. Phones keep the single
   column of the regular grid. ─────────────────────────────── */
@media (min-width: 769px) {
    .article-grid--lead {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-grid--lead > .article-card:first-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 2rem;
        align-content: start;
    }

    .article-grid--lead > .article-card:first-child > * {
        grid-column: 2;
    }

    .article-grid--lead > .article-card:first-child > .card-img-wrap {
        grid-column: 1;
        grid-row: 1 / span 6;
        margin-bottom: 0;
    }

    /* Lead without a picture: text only, but kept to a readable measure. */
    .article-grid--lead > .article-card:first-child:not(:has(.card-img-wrap img)) {
        display: block;
        max-width: 42rem;
    }
}

.article-grid--lead > .article-card:first-child h3 {
    font-size: var(--fs-lead);
    line-height: 1.15;
}

.article-grid--lead > .article-card:first-child .card-excerpt {
    font-size: var(--fs-article);
    line-height: 1.6;
}

.article-grid-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

/* Section heading of a page list (and the optional "Titel" area of the
   six-item container): a plain Gambarino heading, no rule line. One gap of
   2.5rem to its cards on every list of the home page ("Weitere neue Texte",
   "Rezepte", "Hörkolumnen", "Aus dem Archiv"). Above it only 1.5rem of its
   own: after a card grid the grid's 3.5rem bottom margin already separates
   the sections; after a picture or a rule the 1.5rem keeps it from touching. */
.article-grid-header,
.section-title {
    margin: 1.5rem 0 2.5rem;
}

/* In the six-item container the cards sit in their own columns, each grid
   with a 3.5rem top margin. The first visual row follows the container's
   heading, which already sets the gap: items 1–2 on phones (two-up),
   1–3 from 768px. Later rows keep their spacing. */
.section-title + .row > :nth-child(-n+2) .article-grid {
    margin-top: 0;
}

@media (min-width: 768px) {
    .section-title + .row > :nth-child(3) .article-grid {
        margin-top: 0;
    }
}

.article-grid-header h1,
.article-grid-header h2,
.article-grid-header h3,
.article-grid-header h4,
.article-grid-header h5,
.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title p {
    font-family: var(--font-serif);
    font-size: var(--fs-section);
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

/* Tags block headings in the sidebar ("Medien") are h2 for the outline but
   keep the small h5 size they always had. */
.ccm-block-tags-header h2 {
    font-size: 1.25rem;
}

/* The heading already provides the gap above; the grid follows tightly. */
.article-grid-header + .article-grid,
.article-grid-header + .ccm-block-page-list-no-pages + .article-grid {
    margin-top: 0;
}

.article-card {
    position: relative;
    padding-top: 0.75rem;
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--rainbow-line);
    transform-origin: top;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Articles in a series: the line in the series colour, a touch heavier. */
.article-card[data-hue]::before {
    height: 6px;
    background: var(--hue);
}

/* The line presses in, as on the front-page cards. */
.article-card:is(:hover, :focus-within)::before {
    transform: scaleY(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .article-card::before {
        transition: none;
    }
}

.article-card .card-img-wrap {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #e0e0e0;
    margin-bottom: 1.25rem;
    aspect-ratio: 4 / 3;
}

.article-card .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card .card-img-wrap:hover img {
    transform: scale(1.03);
}

/* No image: collapse the whole image area (no empty grey box) — markup kept in the template */
.article-card .card-img-wrap:has(.card-img-placeholder) {
    display: none;
}

.article-card .card-img-placeholder {
    display: none;
}

/* The series (or topic) under the title, in the series colour. */
.article-card .card-category {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--hue-text, var(--rainbow-red-text));
    margin: -0.35rem 0 0.75rem;
}

.article-card[data-hue] .card-read-more {
    color: var(--hue-text);
}

.article-card h2,
.article-card h3 {
    font-family: var(--font-serif);
    /* font-size: 1.2rem;
    font-weight: 700; */
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.article-card .card-date {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-muted);
    margin: 0 0 0.75rem;
}

.article-card .card-excerpt {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    color: var(--color-text);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.article-card .card-read-more,
.ccm-block-page-list-page-entry-read-more .ccm-block-page-list-read-more {
    display: inline-block;
    font-family: var(--font-text);
    font-size: var(--fs-ui);
    font-weight: 400;
    color: var(--rainbow-red-text);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s;
}

.article-card .card-read-more:hover,
.ccm-block-page-list-page-entry-read-more .ccm-block-page-list-read-more:hover {
    background: none;
    color: var(--rainbow-violet);
}

.article-card a.card-read-more a:hover,
.ccm-block-page-list-page-entry-read-more .ccm-block-page-list-read-more:hover {
    color: var(--rainbow-violet);
}


/* ── "Minu Brief" (Image Slider template minu_brief) ────────────
   -minu's welcome as a letter: full-width photo, white letter card on
   top. Every slide takes the next rainbow-line colour, shown as the
   card band, the highlighter behind bold words, a glow over the dark
   side of the photo, a tinted card shadow and the slide's bar.
   Motion: slow photo zoom / drift (different per slide), lines arriving
   one after another, highlighter sweeping in. Phones: photo on top,
   card overlapping its lower edge. ─────────────────────────────── */
/* --mb-hue: the slide's rainbow-line colour (band, glow, shadow, bar).
   --mb-word: the same colour darkened just enough for text on the white
   card (at least 4.6:1), used for the bold words. */
.minu-brief {
    --mb-hue: var(--line-red);
    --mb-word: #eb0000;
    margin-bottom: 3.5rem;
}

.minu-brief[data-hue="0"] { --mb-hue: var(--line-red);    --mb-word: #eb0000; }
.minu-brief[data-hue="1"] { --mb-hue: var(--line-orange); --mb-word: #b06100; }
.minu-brief[data-hue="2"] { --mb-hue: var(--line-yellow); --mb-word: #807500; }
.minu-brief[data-hue="3"] { --mb-hue: var(--line-green);  --mb-word: #128812; }
.minu-brief[data-hue="4"] { --mb-hue: var(--line-blue);   --mb-word: #0072e3; }
.minu-brief[data-hue="5"] { --mb-hue: var(--line-indigo); --mb-word: #4b0082; }
.minu-brief[data-hue="6"] { --mb-hue: var(--line-violet); --mb-word: #9400d3; }

.mb-stage {
    position: relative;
    aspect-ratio: 1417 / 728;
    overflow: hidden;
    background: #05070c;
}

/* Photos: stacked, crossfading; the visible one drifts slowly. */
.mb-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--mb-speed, 800ms) ease;
}

.mb-photo.is-on {
    opacity: 1;
}

.mb-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 35%;
}

/* The photo motion is one continuous camera path across all slides,
   driven by view.js (same transform on every layer, so nothing jumps
   at a slide change). Without JavaScript the photo stays still. */
.mb-photo img {
    transform-origin: 70% 35%;
    will-change: transform;
}

/* A glow in the slide's colour over the dark side of the photo. */
.mb-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 75% at 22% 55%, var(--mb-hue), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.55;
    transition: background 0.9s ease;
    pointer-events: none;
}

/* The letter card. */
.mb-card {
    position: absolute;
    left: 2.25rem;
    bottom: 2.25rem;
    z-index: 2;
    display: grid;
    width: min(31rem, 50%);
    background: #fff;
    padding: 2.1rem 2.25rem 1.9rem;
    box-shadow: 0 1.25rem 2.75rem color-mix(in srgb, var(--mb-hue) 38%, rgba(0, 0, 0, 0.35));
    transition: box-shadow 0.9s ease;
}

.mb-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--mb-hue);
    transition: background-color 0.9s ease;
}

/* All slides share one grid cell (see .mb-card display: grid), so the
   card is as tall as the longest text. */
.mb-slide {
    grid-area: 1 / 1;
    align-self: center;
    visibility: hidden;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.15rem, 1.9vw, 1.55rem);
    line-height: 1.35;
    color: var(--color-rule);
    text-wrap: pretty;
}

.mb-slide.is-on {
    visibility: visible;
}

.mb-slide p {
    margin: 0 0 0.7rem;
}

.mb-slide p:last-of-type {
    margin-bottom: 0;
}

/* Lines arrive one after another. */
.mb-slide > * {
    opacity: 0;
}

.mb-slide.is-on > * {
    animation: mb-line 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mb-slide.is-on > :nth-child(1) { animation-delay: 0.25s; }
.mb-slide.is-on > :nth-child(2) { animation-delay: 0.5s; }
.mb-slide.is-on > :nth-child(3) { animation-delay: 0.75s; }
.mb-slide.is-on > :nth-child(n+4) { animation-delay: 1s; }

@keyframes mb-line {
    from { opacity: 0; transform: translateY(0.8rem); }
    to   { opacity: 1; transform: none; }
}

/* Bold words are set in the slide's colour. */
.mb-slide strong {
    font-weight: 300;
    color: var(--mb-word);
    transition: color 0.9s ease;
}

/* A bold first paragraph ("HEEE!") reads as the headline. */
.mb-slide > p:first-child > strong:only-child {
    font-size: 1.9em;
    line-height: 1.15;
}

.mb-signature {
    display: block;
    height: 62px;
    width: auto;
    margin-top: 1.1rem;
}

/* Progress bars: one per slide, filling in the slide's rainbow colour. */
.mb-bars {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.mb-bar {
    position: relative;
    flex: 1 1 0;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.mb-bar::before,
.mb-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
}

.mb-bar::before {
    background: var(--color-border);
}

.mb-bar::after {
    transform: scaleX(0);
    transform-origin: left center;
}

.mb-bar:nth-child(7n+1)::after { background: var(--line-red); }
.mb-bar:nth-child(7n+2)::after { background: var(--line-orange); }
.mb-bar:nth-child(7n+3)::after { background: var(--line-yellow); }
.mb-bar:nth-child(7n+4)::after { background: var(--line-green); }
.mb-bar:nth-child(7n+5)::after { background: var(--line-blue); }
.mb-bar:nth-child(7n+6)::after { background: var(--line-indigo); }
.mb-bar:nth-child(7n)::after   { background: var(--line-violet); }

.mb-bar.is-done::after {
    transform: scaleX(1);
}

.mb-bar.is-on::after {
    animation: mb-fill var(--mb-dur, 9s) linear forwards;
}

.minu-brief.is-held .mb-bar.is-on::after {
    animation-play-state: paused;
}

@keyframes mb-fill {
    to { transform: scaleX(1); }
}

/* Reduced motion: no drift (view.js skips it), no line entrance. */
.minu-brief.is-still .mb-slide.is-on > * {
    animation: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mb-slide.is-on > * {
        animation: none;
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .mb-stage {
        aspect-ratio: auto;
        overflow: visible;
        background: none;
    }

    .mb-photos {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #05070c;
    }

    .mb-photo img {
        object-position: 80% 30%;
    }

    .mb-glow {
        bottom: auto;
        aspect-ratio: 4 / 3;
        background: radial-gradient(ellipse 70% 60% at 20% 70%, var(--mb-hue), transparent 70%);
    }

    .mb-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -2.5rem 0.75rem 0;
        padding: 1.75rem 1.4rem 1.5rem;
        box-shadow: none;
    }

    .mb-bars {
        margin-top: 1.1rem;
    }

    .mb-slide {
        font-size: 1.2rem;
    }
}

/* ── Homepage image slider (core Image Slider block, home.php) ─
   Desktop: the slide text overlays the left side of the image as
   a side panel. Mobile: it stacks below the image in normal flow;
   all slides share one grid cell so the slider is as tall as the
   longest text (responsiveSlides would otherwise clip it to the
   height of the first slide). ──────────────────────────────── */
.page-template-home .ccm-image-slider-container {
    margin-bottom: 3.5rem;
}

.page-template-home .ccm-image-slider-text {
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--slide-hue, var(--rainbow-violet));
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
    color: #fff;
    text-align: left;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    font-family: var(--font-text);
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.55;
}

/* Each slide takes the next colour of the rainbow line as a translucent
   panel (85 % opacity) with white text. Each colour is darkened only as
   far as needed for white text to keep at least 4.6:1 even where the
   photo behind the panel is pure white (the worst case); over darker
   photo areas the contrast only rises. The pager bar of a slide shows
   the undarkened line colour. */
.page-template-home .rslides > li:nth-child(7n+1),
.page-template-home .rslides_tabs li:nth-child(7n+1) { --slide-hue: rgb(219 0 0 / 0.85);    --slide-bar: var(--line-red); }
.page-template-home .rslides > li:nth-child(7n+2),
.page-template-home .rslides_tabs li:nth-child(7n+2) { --slide-hue: rgb(143 78 0 / 0.85);   --slide-bar: var(--line-orange); }
.page-template-home .rslides > li:nth-child(7n+3),
.page-template-home .rslides_tabs li:nth-child(7n+3) { --slide-hue: rgb(102 94 0 / 0.85);   --slide-bar: var(--line-yellow); }
.page-template-home .rslides > li:nth-child(7n+4),
.page-template-home .rslides_tabs li:nth-child(7n+4) { --slide-hue: rgb(15 111 15 / 0.85);  --slide-bar: var(--line-green); }
.page-template-home .rslides > li:nth-child(7n+5),
.page-template-home .rslides_tabs li:nth-child(7n+5) { --slide-hue: rgb(0 95 189 / 0.85);   --slide-bar: var(--line-blue); }
.page-template-home .rslides > li:nth-child(7n+6),
.page-template-home .rslides_tabs li:nth-child(7n+6) { --slide-hue: rgb(75 0 130 / 0.85);   --slide-bar: var(--line-indigo); }
.page-template-home .rslides > li:nth-child(7n),
.page-template-home .rslides_tabs li:nth-child(7n) { --slide-hue: rgb(148 0 211 / 0.85);  --slide-bar: var(--line-violet); }

/* During the cross-fade only the incoming slide's text is visible,
   so two texts never sit on top of each other. */
.page-template-home .rslides > li:not([class*="_on"]) .ccm-image-slider-text > * {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* The first paragraph of each slide reads as its headline. */
.page-template-home .ccm-image-slider-text > p:first-child {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

.page-template-home .ccm-image-slider-text > p {
    margin-top: 0;
}

/* Hero motion: the photo slowly zooms in and out on every slide (all
   slides run in sync, so the cross-fade stays seamless); the text panel
   slides in and its lines follow one after another. */
.page-template-home .rslides picture {
    display: block;
    overflow: hidden;
}

.page-template-home .rslides img {
    float: none;
    transform-origin: 70% 35%;
    animation: minu-hero-zoom 8s ease-in-out infinite alternate;
}

.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text {
    animation: minu-hero-panel 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > * {
    animation: minu-hero-line 0.7s ease-out both;
}

.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > :nth-child(1) { animation-delay: 0.35s; }
.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > :nth-child(2) { animation-delay: 0.55s; }
.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > :nth-child(3) { animation-delay: 0.75s; }
.page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > :nth-child(n+4) { animation-delay: 0.95s; }

@keyframes minu-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.18); }
}

@keyframes minu-hero-panel {
    from { opacity: 0; transform: translateX(-2rem); }
}

@keyframes minu-hero-line {
    from { opacity: 0; transform: translateY(0.75rem); }
}

/* Pager as progress bars. The fill duration must match the block's
   "Timeout" setting (8000 ms); while the pointer rests on the slide,
   the slider pauses and restarts its timer on leave, so the bar does too. */
.page-template-home .rslides_tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0 0;
}

.page-template-home .rslides_tabs li {
    flex: 1 1 0;
    margin: 0;
}

.page-template-home .rslides_tabs li a,
.page-template-home .rslides_tabs li.rslides_here a {
    position: relative;
    display: block;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    border-radius: 0;
    background: none;
}

.page-template-home .rslides_tabs li a::before,
.page-template-home .rslides_tabs li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
}

.page-template-home .rslides_tabs li a::before {
    background: var(--color-border);
}

.page-template-home .rslides_tabs li a::after {
    background: var(--slide-bar, var(--rainbow-violet));
    transform: scaleX(0);
    transform-origin: left center;
}

.page-template-home .rslides_tabs li.rslides_here a::after {
    animation: minu-hero-progress 8s linear forwards;
}

.page-template-home .rslides:hover ~ .rslides_tabs li.rslides_here a::after {
    animation: none;
    transform: scaleX(1);
}

.page-template-home .rslides_tabs li a:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

@keyframes minu-hero-progress {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .page-template-home .rslides img,
    .page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text,
    .page-template-home .rslides > li[class*="_on"] .ccm-image-slider-text > * {
        animation: none;
    }

    .page-template-home .rslides_tabs li.rslides_here a::after {
        animation: none;
        transform: scaleX(1);
    }
}

/* Rainbow divider between the entries of every standard page list
   (entries with a thumbnail use the "-horizontal" class instead). */
.ccm-block-page-list-pages > [class^="ccm-block-page-list-page-entry"] + [class^="ccm-block-page-list-page-entry"] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    background: var(--rainbow-line) top left / 100% 2px no-repeat;
}

/* Search results (blocks/search/view.php): the same rainbow divider. */
#searchResults .searchResult + .searchResult {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    background: var(--rainbow-line) top left / 100% 2px no-repeat;
}

/* "Weiterlesen" under plain list entries: a little air above it. */
.ccm-block-page-list-page-entry-text .ccm-block-page-list-page-entry-read-more {
    margin-top: 0.4rem;
}

/* Entry titles are headings (h2/h3, see blocks/page_list/view.php) but keep
   the look they had as plain text: Georgia, 1.75rem, no margins. */
.ccm-block-page-list-page-entry-text .ccm-block-page-list-title {
    font-family: var(--font-text);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Picture + text rows (Shop, plain lists). The core lays them out as a CSS
   table, which grows to fit the longest word ("Weihnachtsgeschichten" at
   1.75rem) and ran 75px past a phone screen. Flex keeps the same look
   (120px picture, 20px gap) and lets the text column shrink. */
div.ccm-block-page-list-page-entry-horizontal {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

div.ccm-block-page-list-page-entry-horizontal div.ccm-block-page-list-page-entry-thumbnail {
    display: block;
    flex: none;
    width: auto;
}

div.ccm-block-page-list-page-entry-horizontal div.ccm-block-page-list-page-entry-text {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
}

@media (max-width: 560px) {
    div.ccm-block-page-list-page-entry-horizontal {
        gap: 0.9rem;
    }

    div.ccm-block-page-list-page-entry-horizontal div.ccm-block-page-list-page-entry-thumbnail img {
        width: 88px;
    }

    .ccm-block-page-list-page-entry-text .ccm-block-page-list-title {
        font-size: 1.375rem;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
    .page-template-home .rslides {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .page-template-home .rslides > li {
        grid-area: 1 / 1;
        display: flex !important;
        flex-direction: column;
        position: relative !important;
    }

    .page-template-home .ccm-image-slider-text {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        text-align: center;
        padding: 0.75rem;
        background: var(--slide-hue, var(--rainbow-violet));
        box-shadow: none;
    }

    .page-template-home .ccm-image-slider-text > :last-child {
        margin-bottom: 0;
    }
}

/* ── Two Column Light container ───────────────────────────────
   Columns align to the top by default (e.g. two side-by-side
   page lists). ──────────────────────────────────────────────── */
.two-column-stripe {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

.two-column-stripe .row {
    align-items: flex-start;
}

/* ── Lightbox overlay (pure CSS trigger via <a> + :target) ─── */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
}

.lightbox-overlay:target {
    display: flex;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 4px 40px rgba(0,0,0,0.6);
}

.lightbox-overlay .lightbox-caption {
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    line-height: 1.5;
    margin-top: 1rem;
    text-align: center;
    max-width: 700px;
}

.lightbox-overlay .lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    line-height: 1;
}


/* ── Article title (single-page templates) ───────────────────── */
h1.display-2 {
    margin-bottom: 1.5rem;
}

/* ── Article hero image ──────────────────────────────────────── */
.article-hero {
    margin: 0 0 2.5rem;
}

.article-hero-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Hero Image area (editable Image block, click-to-edit in edit mode) */
.hero-image-area {
    margin-bottom: 2.5rem;
}

.hero-image-area img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Caption under the hero picture: the Content block after the Image block
   in the Hero Image area (e.g. "Illustration: Rebekka Heeb"). Same look in
   edit mode, where an empty one shows Concrete's "Empty Content Block". */
.hero-caption,
.hero-image-area p {
    margin: 0.6rem 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--color-muted);
}

.hero-caption p {
    margin: 0;
}

.article-body {
    font-size: var(--fs-article);
    line-height: 1.8;
}

/* ── Article dateline ("Zeitungszeile", elements/article_tags.php) ──
   One line under the title, between two thin rainbow rules:
   date · erschienen im <medium> · Rubrik <series>. The medium is
   underlined in ink, the series in its own rainbow colour (its place in
   the Rubriken Index), with text in the text-safe shade. ────────── */
.article-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.6rem;
    margin: 0 0 1.75rem;
    padding: 0.75rem 0;
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    color: var(--color-muted);
    background:
        var(--rainbow-line) left top / 100% 1px no-repeat,
        var(--rainbow-line) left bottom / 100% 1px no-repeat;
}

.article-dateline-date {
    color: var(--color-ink);
}

.article-dateline a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 0.15s;
}

.article-dateline a:hover {
    text-decoration-thickness: 3px;
}

.article-dateline-medium {
    color: var(--color-rule);
    text-decoration-color: var(--color-field-border);
}

.article-dateline-medium:hover {
    color: var(--color-rule);
}

/* Series colours (see "Rubrikenfarben" at the top of this file). */

.article-dateline-series,
.article-dateline-series:hover {
    color: var(--hue-text, var(--rainbow-red-text));
    text-decoration-color: var(--hue, var(--rainbow-red));
    text-decoration-thickness: 2px;
}

.article-dateline-series:hover {
    text-decoration-thickness: 3px;
}

/* ── Initial at the start of an article (templates wrap Main in
   .article-text, with data-hue for articles in a series) ─────────── */
.article-text > p:first-of-type::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 3.7em;
    line-height: 0.82;
    color: var(--hue-text, var(--color-rule));
}

/* ── Series page title (Glossen, Mimpfeli, …): a bar in its colour ── */
.series-title {
    position: relative;
    padding-bottom: 1.25rem;
}

.series-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: var(--hue);
}

/* ── Front page (Page List template "titelseite") ────────────────
   One large lead story, then quiet entries with series colour. ─── */
.front-page {
    margin: 3rem 0 3.5rem;
}

.front-lead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 2.25rem;
    align-items: center;
    padding-top: 1.25rem;
}

.front-lead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--hue, var(--rainbow-line));
    transform-origin: top;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* "The line presses in": touching a story (pointer or keyboard) thickens
   its series line, the same gesture as the section bar's underline. */
.front-lead:is(:hover, :focus-within)::before {
    transform: scaleY(1.5);
}

.front-lead--text {
    grid-template-columns: minmax(0, 1fr);
}

.front-lead--text .front-lead-text {
    max-width: 46rem;
}

.front-lead-image {
    overflow: hidden;
}

.front-lead-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.front-lead:is(:hover, :focus-within) .front-lead-image img {
    transform: scale(1.03);
}

/* Title underlines fade in instead of snapping on. */
.front-lead-title {
    margin: 0 0 0.9rem;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    line-height: 1.1;
    text-wrap: balance;
    /* Long Swiss-German words ("Wiehnachtsgschicht") would overflow the
       column at this size; hyphenate only long words, at sensible points. */
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word; /* fallback when no hyphenation point is found */
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
    transition: text-decoration-color 0.18s ease-out;
}

.front-lead-line {
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    color: var(--color-muted);
}

.front-lead-section {
    font-weight: 600;
    color: var(--hue-text, var(--color-rule));
}

.front-lead-excerpt {
    margin: 0 0 1.2rem;
    font-size: var(--fs-article);
    line-height: 1.6;
}

.front-lead-more {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-rule);
    text-decoration: underline;
    text-decoration-color: var(--hue, var(--color-rule));
    text-decoration-thickness: 3px;
    text-underline-offset: 0.25em;
    transition: text-decoration-thickness 0.15s ease-out;
}

.front-lead:is(:hover, :focus-within) .front-lead-title {
    text-decoration-color: currentColor;
}

.front-lead:is(:hover, :focus-within) .front-lead-more {
    color: var(--color-rule);
    text-decoration-thickness: 4px;
}

.front-rest-title {
    margin: 3.25rem 0 2.5rem;
    font-size: 1.6rem;
}

/* Further entries: small cards with the series line, optional picture,
   title, series · date, teaser text and "Weiterlesen". */
.front-rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
}

/* Spacing inside the card ("Mehr Luft", 2026-11-08): the line stands clear
   of the title, and title, meta, teaser and link each get their own gap. */
.front-card {
    position: relative;
    padding-top: 1.25rem;
}

.front-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--hue, var(--rainbow-line));
    transform-origin: top;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.front-card:is(:hover, :focus-within)::before {
    transform: scaleY(1.8);
}

.front-card-image {
    margin-bottom: 1.25rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-border);
}

.front-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.front-card:is(:hover, :focus-within) .front-card-image img {
    transform: scale(1.03);
}

.front-card-title {
    margin: 0 0 0.65rem;
    font-size: 1.4rem;
    line-height: 1.3;
    text-wrap: balance;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word; /* fallback when no hyphenation point is found */
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: text-decoration-color 0.18s ease-out;
}

.front-card:is(:hover, :focus-within) .front-card-title {
    text-decoration-color: currentColor;
}

.front-card-meta {
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.front-card-section {
    font-weight: 600;
    color: var(--hue-text, var(--color-muted));
}

.front-card-text {
    margin: 0 0 1.15rem;
    font-size: var(--fs-ui);
    line-height: 1.6;
    color: var(--color-text);
}

.front-card-more {
    font-family: var(--font-text);
    font-size: var(--fs-ui);
    color: var(--hue-text, var(--rainbow-red-text));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* Reduced motion: no zoom; the line and underlines still change, but
   without a transition, so the feedback stays. */
@media (prefers-reduced-motion: reduce) {
    .front-card:is(:hover, :focus-within) .front-card-image img,
    .front-lead:is(:hover, :focus-within) .front-lead-image img {
        transform: none;
    }

    .front-lead::before,
    .front-card::before,
    .front-lead-title,
    .front-card-title,
    .front-lead-more {
        transition: none;
    }
}

@media (max-width: 900px) {
    .front-rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .front-lead,
    .front-rest {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Publication date under article titles (all page templates). */
.article-date {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

.article-body h1 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* ── Series index (Auto-Nav template "Rubriken Index") ──────────
   The series of a section as large outlined tabs: a square in the
   series' own rainbow hue, the name, and the number of texts. Fills
   with Press Black and lifts slightly on hover / for the current one.
   Phones: one full-width tab per row, count pushed to the right. ── */
.series-index {
    margin: 1.75rem 0 2.5rem;
}

.series-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.series-index-list > li:nth-child(7n+1) { --hue: var(--rainbow-red); }
.series-index-list > li:nth-child(7n+2) { --hue: var(--rainbow-orange); }
.series-index-list > li:nth-child(7n+3) { --hue: var(--rainbow-yellow); }
.series-index-list > li:nth-child(7n+4) { --hue: var(--rainbow-green); }
.series-index-list > li:nth-child(7n+5) { --hue: var(--rainbow-blue); }
.series-index-list > li:nth-child(7n+6) { --hue: var(--rainbow-indigo); }
.series-index-list > li:nth-child(7n)   { --hue: var(--rainbow-violet); }

.series-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--color-rule);
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-rule);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.series-tab::before {
    content: '';
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--hue, var(--rainbow-red));
}

.series-tab-count {
    font-weight: 400;
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.series-tab:hover,
.series-tab[aria-current] {
    background: var(--color-rule);
    color: var(--color-paper);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.series-tab:hover .series-tab-count,
.series-tab[aria-current] .series-tab-count {
    color: #d6d6d6;
}

@media (max-width: 560px) {
    .series-index-list {
        flex-direction: column;
    }

    .series-tab {
        width: 100%;
    }

    .series-tab-count {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .series-tab:hover {
        transform: none;
    }
}

/* ── Audio player (js/audio-player.js) ───────────────────────────
   In the article: an "Artikel-Karte" (series, title, "vorgelesen von
   -minu", duration, violet play button). Once started, a bar docks to
   the bottom of the screen with the recording's waveform as progress. ── */
.audio-player.is-enhanced audio {
    display: none;
}

.mp-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 1.35rem;
    background: #fff;
    font-family: var(--font-sans);
}

.mp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--rainbow-line);
}

.mp-card svg,
.mp-dock svg {
    width: 1.35em;
    height: 1.35em;
    fill: currentColor;
    flex: none;
}

.mp-ic-pause { display: none; }
.is-playing .mp-ic-play { display: none; }
.is-playing .mp-ic-pause { display: block; }

/* Card button: dark text button "▶ Anhören" / "❚❚ Pause". */
.mp-card-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex: none;
    min-height: 56px;
    min-width: 10.5rem;
    padding: 0 1.6rem 0 1.4rem;
    border: 0;
    border-radius: 0;
    background: var(--color-rule);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mp-card-play svg {
    width: 1em;
    height: 1em;
}

.mp-card-play:hover {
    background: var(--rainbow-violet);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mp-card-play:active {
    background: #5a0791;
    transform: none;
    box-shadow: none;
}

.mp-lbl-pause { display: none; }
.is-playing .mp-lbl-play { display: none; }
.is-playing .mp-lbl-pause { display: inline; }

.mp-dock-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--rainbow-violet);
    color: var(--color-paper);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mp-dock-play:hover {
    background: #5a0791;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mp-card-kicker {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rainbow-red-text);
}

.mp-card-title {
    margin: 0.15rem 0 0.1rem;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--color-rule);
    text-wrap: balance;
}

.mp-card-by {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    color: var(--color-ink);
}

/* The docked bar */
.mp-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--color-paper);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    font-family: var(--font-sans);
    color: var(--color-rule);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.35s;
}

.mp-dock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rainbow-line);
}

.mp-dock.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mp-dock.no-motion,
.mp-dock.no-motion.is-open {
    transition: none;
}

/* Keep the end of the page readable above the bar. */
html.has-mp-dock body {
    padding-bottom: 6rem;
}

.mp-dock-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 13rem) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
}

.mp-dock-play {
    width: 52px;
    height: 52px;
}

.mp-dock-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-wave {
    position: relative;
    height: 52px;
}

.mp-wave canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Seeking: a transparent range input over the waveform (click, drag, arrow keys). */
.mp-wave-range {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}

.mp-wave-range:focus-visible {
    opacity: 1;
    outline: 2px solid var(--rainbow-violet);
    outline-offset: 2px;
}

.mp-wave-range::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.mp-wave-range::-moz-range-track { background: transparent; }
.mp-wave-range::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 52px; background: var(--color-rule); }
.mp-wave-range::-moz-range-thumb { width: 3px; height: 52px; border: 0; border-radius: 0; background: var(--color-rule); }

.mp-dock-time {
    font-size: var(--fs-meta);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-dock-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
}

.mp-dock-close:hover {
    color: var(--color-rule);
}

@media (max-width: 640px) {
    .mp-card {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .mp-card-title {
        font-size: 1.4rem;
    }

    .mp-dock-inner {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 0.5rem 0.75rem;
        padding: 0.6rem 0.75rem 0.75rem;
    }

    .mp-dock-play {
        width: 48px;
        height: 48px;
    }

    .mp-wave {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 40px;
    }

    .mp-wave-range::-webkit-slider-thumb { height: 40px; }
    .mp-wave-range::-moz-range-thumb { height: 40px; }

    html.has-mp-dock body {
        padding-bottom: 8rem;
    }
}

/* ── Breadcrumb trail (under main nav) ──────────────────────── */
/* Flush left with the logo and the content column; no rules above or below. */
.breadcrumb-trail {
    padding: 0.65rem 0;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
}

.breadcrumb-trail a {
    color: var(--color-ink);
    text-decoration: none;
}

.breadcrumb-trail a:hover {
    text-decoration: underline;
}

.breadcrumb-trail .breadcrumb-sep {
    margin: 0 0.5rem;
    color: var(--color-muted);
}

.breadcrumb-trail .breadcrumb-current {
    color: var(--color-muted);
}

/* ── Rainbow section dividers ────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem 0 1.25rem;
}

.section-divider h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-section);
    font-weight: 300;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.section-divider::after {
    content: '';
    flex: 1;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--rainbow-red),
        var(--rainbow-orange),
        var(--rainbow-yellow),
        var(--rainbow-green),
        var(--rainbow-blue),
        var(--rainbow-violet)
    );
}

/* ── Article sidebar (Sidebar area, right_sidebar.php) ───────
   Beside the article on desktop, below it on smaller screens. */
.article-sidebar {
    margin-top: 2.5rem;
}

@media (min-width: 992px) {
    .article-sidebar {
        margin-top: 0;
    }
}

/* ── Next / Previous block thumbnails───────────────────────── */
.ccm-block-next-previous-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #e8e8e8;
}

.ccm-block-next-previous-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Tags (page_tags / shop_tags blocks) ────────────────────── */
.page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0;
}

.page-tag-link {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border: 1.5px solid currentColor;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

/* Cycle tag colours through the text-safe rainbow shades */
.page-tag-link:nth-child(7n+1) { color: var(--rainbow-red-text); }
.page-tag-link:nth-child(7n+2) { color: var(--rainbow-orange-text); }
.page-tag-link:nth-child(7n+3) { color: var(--rainbow-yellow-text); }
.page-tag-link:nth-child(7n+4) { color: var(--rainbow-green-text); }
.page-tag-link:nth-child(7n+5) { color: var(--rainbow-blue-text); }
.page-tag-link:nth-child(7n+6) { color: var(--rainbow-indigo-text); }
.page-tag-link:nth-child(7n+0) { color: var(--rainbow-violet-text); }

.page-tag-link:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ── Footer "Unterschrift" (elements/footer.php) ─────────────────
   A wide band of the seven colours, -minu's signature large with the
   site text, the main sections as an index, the editor's links small
   at the end. ─────────────────────────────────────────────────── */
.site-footer {
    position: relative;
    margin-top: 4.5rem;
    padding: 2.75rem 0 2rem;
    font-family: var(--font-text);
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right,
        var(--line-red) 0 14.28%, var(--line-orange) 0 28.57%, var(--line-yellow) 0 42.85%,
        var(--line-green) 0 57.14%, var(--line-blue) 0 71.42%, var(--line-indigo) 0 85.71%,
        var(--line-violet) 0);
}

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

.footer-sign-mark img {
    display: block;
    height: 75px;
    width: auto;
    max-width: 100%;
}

.footer-sign-mark p {
    margin: 0;
}

.footer-sign-name {
    margin: 0 0 0.6rem;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--color-rule);
}

/* "-minu folgen" beside the signature (Social Links template "Folgen"). */
.social-follow {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.social-follow-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.35rem;
    color: var(--color-rule);
}

.social-follow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.social-follow-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0 1.1rem;
    border: 1.5px solid var(--color-rule);
    background: #fff;
    color: var(--color-rule);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.social-follow-list a:hover {
    background: var(--color-rule);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.social-follow-list svg {
    width: 1.35em;
    height: 1.35em;
    fill: currentColor;
    flex: none;
}

@media (max-width: 760px) {
    .social-follow {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-follow-list a:hover {
        transform: none;
    }
}

.footer-index ul {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 1.25rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 2rem;
    border-top: 1px solid var(--color-border);
}

.footer-index a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--color-rule);
    text-decoration: none;
}

.footer-index a::before {
    content: '';
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--hue, var(--rainbow-red));
}

.footer-index a:hover {
    color: var(--rainbow-red-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.footer-fine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
}

.footer-fine p {
    margin: 0;
}

.footer-fine a {
    color: var(--color-ink);
}

.footer-account {
    margin-left: auto;
}

.footer-account a {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-sign-mark img {
        height: 60px;
    }

    .footer-index ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .footer-index ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-account {
        margin-left: 0;
    }
}

/* Touch screens and phones: small stand-alone links get a 44px tap height
   (fine print, plain "Weiterlesen"). The cards' "Weiterlesen" are stretched
   links whose tap area is the whole card already. Desktop keeps its spacing. */
@media (pointer: coarse), (max-width: 768px) {
    .footer-fine a,
    .ccm-block-page-list-page-entry-read-more .ccm-block-page-list-read-more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-fine {
        gap: 0 1.75rem;
    }
}

/* ── Concrete CMS edit mode helpers ─────────────────────────── */
.ccm-page-edit-mode .article-card { outline: 1px dashed #aaa; }

.hero-image-attribute-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: #fffbea;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
}
.hero-image-attribute-notice img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.hero-image-attribute-notice span {
    font-family: var(--font-sans);
    font-size: .8rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* ── Responsive breakpoints ─────────────────────────────────── */
@media (max-width: 768px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

/* Below 992px the section bar no longer fits in one row (it wrapped onto a
   second line between 769px and ~940px), so the "Menü" button takes over. */
@media (max-width: 991.98px) {
    /* Header: logo + "Menü" button; Bootstrap collapse opens the list. */
    .site-header {
        padding-bottom: 0.9rem;
    }

    .site-header .site-logo {
        height: 70px;
    }

    .site-menu-toggle {
        display: inline-flex;
    }

    .site-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav-list > li > a {
        padding: 0.75rem 0 0.75rem 1.5rem;
        font-size: 1.125rem;
    }

    /* The hue becomes a small square marker before each section. */
    .site-nav-list > li > a::after {
        right: auto;
        top: 50%;
        bottom: auto;
        width: 0.65rem;
        height: 0.65rem;
        transform: translateY(-50%);
    }

    .site-nav-list > li > a:hover::after,
    .site-nav-list > li.nav-selected > a::after {
        transform: translateY(-50%);
    }

    /* Dropdowns on mobile: show inline below parent */
    .site-nav .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,0.04);
        padding-left: 1.5rem;
    }
}

/* Phones: only "Menü" stays in the logo bar. */
@media (max-width: 768px) {
    .site-search-link {
        display: none;
    }
}

@media (max-width: 480px) {
    .site-header .site-name {
        font-size: 2rem;
    }
}

/* Two-up cards on phones (col-6 containers, ~150–170px wide): smaller
   titles so a heading doesn't run to five or six lines. */
@media (max-width: 767px) {
    .col-6 .article-card h2,
    .col-6 .article-card h3 {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .col-6 .article-card .card-excerpt {
        font-size: var(--fs-ui);
    }
}

/* ── Titelseite (homepage hero area) ────────────────────────── */
.titelseite {
    padding: 0;
}

/* ── Testimonial: "Hero Testimonial" custom template ─────────
   Ported from the original Atomik theme (concrete/themes/atomik/
   css/skins/default.css) so the award image renders as a full
   background instead of a plain inline <img>. ──────────────── */
.ccm-block-testimonial-hero {
    padding-bottom: 5rem;
    padding-top: 7rem;
    position: relative;
}

.ccm-block-testimonial-hero-cover {
    background-color: rgba(76, 79, 86, .5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

/* The template passes two copies (--bg-sm 800px, --bg 1920px); phones load
   only the small one. */
.ccm-block-testimonial-hero-image {
    background-image: var(--bg-sm, var(--bg));
    background-size: cover;
    background-position: center;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

@media (min-width: 769px) {
    .ccm-block-testimonial-hero-image {
        background-image: var(--bg);
    }
}

.ccm-block-testimonial-hero-text {
    position: relative;
    z-index: 3;
}

.ccm-block-testimonial-hero-quote {
    position: relative;
}

.ccm-block-testimonial-hero-quote h4,
.ccm-block-testimonial-hero-quote blockquote {
    color: #fff;
    text-align: center;
    font-weight: 300;
}

.quote-start,
.quote-end {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 30px;
    position: absolute;
    width: 35px;
}

.quote-start {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABACAYAAAC5vjEqAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAAQAAAAACgQQ0uAAAEUUlEQVR4Ae1aTYhOYRSeb9BIYyz8NEqMYiHURMnGYoqUkr+lDAskrAZNNlJG2bIziTJlaDQ2sxg12flbKCzEBpkSFqIYxBjPM9zpzsx37znvOfc2C++pt+/97jnPec597vN+9373+yo1ThsZGVmDFNsNaR5XKpVeAy4YghoPArQoGFhTc8mAGQ8B+QCGxVrHZyrnHQpbjjFsKPATMHWuqpBgrYGYkG8Ys13kSjB4OklosMtKiuwwkPYYiAnpyc5anAc8jRjfSWiwTa5KQLgMw9K6rHWHi1wJBs85khnsHTDTlDTVw5DgooGYEP/erl7SuKPgafjHRc5QO58kq00mIa9ga0T83hBMKrYXV68fqfdlTQ8h8Rxj8m4j7i8MAllblyu50UWuAIOjDuMtyQz2UkGRHQJCT+v693Z2aWMe1HjAIEwCOTuWCBPLFvO07g1sr+F0AUXPcZY8p+OOvPbtBXJP63KF1jsKV0HBsYtERns6kSS0g/YgwcKJSZTvX6F7HihjPWHtDvA1MxYrUovxwrgyhHWYyZVAcLQ46iO0SUk1OQxgT+uSfOXkrMUeAcdtEhntrqsakD60EhP2xEWuAIOj2VEfoUeq0ag+gwBuAXhdtQTKY/Yrg5IAYZ7PHl5Z7d8PIVA/JTbab+Ca9OcZHon8SzF+GesjrD+LVewggJsB3pyVQHH8Pq5erxVxnhDe93i+XNo7HAJ1U2KHVd3bHjXSWNQ1H2PIUR+fTTWkc6rnAHpbl22/QE1oCET+DgyP3cyjlbaYt3UHsL0+5BXg8UGVeuAPe3IAa7s5BLm3dbmqrc7ic+HI30YSh30GdmYuSZYTwDMOYkLtezurqNRx5J+BMUgih11JpdRPQViP8dFBTKj9vkJRKvLvc9ZHuO25M4De1iX5TsV5mkKQu4LxjCQOsz2bAmERrVvqc2fUuM0hTAK9oFmdalex3QBafoVM893C1avM586erxVJneE3h5C2iNblCtn2dlJ6zitybyCB09TPnSd20FbUtiKnPo3rPYLuaAKNMUV0z3UTN1blnnNlCFftbUuByL0ag19+vbYqmB+MRbQuCy/tuTNyd5HAaZOeO6vEAmmfk5hw9d5WFZUKQu4lGD8xvHYylVacjn4GgZEtt0WMlgPCrwxyziSiDZPpyRvHa1CNFRJBoKt44S8WXutDgkFFkhO4DfiqiBsNQX1zMXmDMUuLyYj7guNdGb70Yf65q3P0AMgXYxTRukijtnnpaqQ5sp5WZy4mcOyfb9xixzCKaF3pPE1+nC+75qgJXACIAu0vIE+ZKfhfIm6xKTEK5N3XZRc+pfVRoGg5CkSBcsShKwoUBRIUENyxg6JAggKCO3ZQFEhQQHDHDooCCQoI7thBUSBBAcEdOygKJCgguGMHRYEEBQR37KAokKCA4I4dFAUSFBDcsYOiQIICgjt2UBRIUEBw8yfnU0JMGe6hgKSPpqDG5wH1/d+hfwAXyUHEZ/sR0wAAAABJRU5ErkJggg==");
    left: 0;
    top: -50px;
}

.quote-end {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABCCAYAAAD0dpAhAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAAQgAAAADagV5OAAAEbUlEQVR4Ae2bz0tUURTHndSsRAohCCrSooSCVkG7imgREUVCUS1atGjRfyKVktUihBZFhZsWZejChUFBm4IsiRaSmP2mkCgLLafPMYeG+fHuvee8VxH3wmFmPOd7zvd+93lv3rvzrKmJI1GBnHjz+XwLL9vl/R8el3O5XN6nJhxbidvmE5tmTEGgQyTtTTOxZ646BPrhE4tAR4m76hObZsyCNJP9j7miQI5VjQJFgRwKONyxg6JADgUc7thBUSCHAg537KAokEMBhzt2UBTIoYDDHTsoCuRQwOGOHRQFcijgcMcOigI5FHC4YwdFgRwKONyxg6JADgUc7thBUSCHAg537KB/WKAh319VHXPI0j34NzuoI8uZpZS7o24+kTxA8N0jqfyWX+sR5woZpnsGXEEl/lk++3CURU9j4R/CcbCEQ/JHHiDoxNIY8iBCJgNy3WkQJIc80FEz93SHD1MAsirj2Eqf+ISYMXzrWR2fbkhIU+6Co3T3BLai3Bv0l1Gi2+QcGdKK8vyQVRxheToLcSQxYydmFUfynBJx5I33YHV6MOt4T4LF3kUDA8l9yUoQ/BtsUaG0VwcBqAfQXgAZXrtZma8GfFUoHBtwpsHxLBy/VS1UyUHxfZh1fCZBc6X8afyN3O1WguA/YcuK+Xh1EIAjxSDl+x5W5qMS6wNLg+NFOE4WF3N+i6FoI4B32JJiYOD7GeLXUfxFIM4rHI5NBL7FLOe3afCtcHxVXNSng/YDsIgj9a5lJc78ZA7wahFH0lwpFWc+d/ILq9OHWcYs4E3JVWxe8g9YCIIVjm3BLAA1Y9OYZdwMLhwAgNhybMZCEOyNaiVdh9hBgPIVbxkdFrAHVm4JCveUHuEVQ3QcUfaOcWXuVqST4h/hd8/IcUhFh6KrMDk2LWOvqrgnCGJrMCvH3Unlkg6xwwCdlwEJyUfw3U7wp+GSax8LR822yy/erMwDzDKOpaFAUg7IPbIQBKvbdgHYZiw8Dt56ck/SRv5DaaOR43PwzpN7tUPMetneyUWXXD1nOXSr/5vRGTjq9qRQ9plhdT6AlduTTAc1Rg0cvbddyjqIoluY2QbD7M6zMl8MeCcUjlsJWusMrB7gve1SJhA5LYfXFPhz1Xml5rEcXrJ4F1RMWJkF2ASmHZmLA7Fa7LWWILgulTgCArzDUFjuh1rUxT2B1Nhl4Cj3les9S82FlR5iltbt5dwzFlJcGWvheB2Ouj0plK3H5BtIOzYrJ+wNg1gDNqkkqNp2Ke4guSfR7hn3szLD3jPVB+4BulQJ74PjSCi2WCDLt5duuyCUre0bVs+Rlm3E5FcHzbgfPs9wBMSasCkNQTDqbZdCB8m+s/bqV78yYTpZ9p1tHFH4lnJlnoKzbDd4S0SdfiXHJyaOgC37zse9Z2gIhKNl39m27ULxE5hmvAS00DBvbyh1TmoIgjFvu8g5SHvh1cXX5rT3LG2BWo7mbZccKsvde+FkHTKNxwiUyYMIpSQMHGVLNexBhNLi8XOyAj8BRpN5vEyiYO4AAAAASUVORK5CYII=");
    bottom: -50px;
    right: 0;
}

.ccm-block-testimonial-hero-avatar {
    position: relative;
    text-align: center;
    z-index: 3;
}

.ccm-block-testimonial-hero-avatar img {
    border: 1px solid #fff;
    border-radius: 84px;
    height: 114px;
    width: 114px;
    margin: 3rem auto 0;
    object-fit: cover;
    object-position: center top;
}

.ccm-block-testimonial-hero-name {
    color: #fff;
    font-weight: 600;
    margin-top: 1rem;
    text-align: center;
}

.ccm-block-testimonial-hero-position {
    color: #fff;
    font-size: .875rem;
    text-align: center;
}

.ccm-block-testimonial-hero-position a {
    color: #fff;
    text-decoration: underline;
}

/* Composite/grouped form fields (e.g. the Address attribute type) render their
   question as a <legend>, not a <label> — hide it here since it's redundant
   with the individual sub-field labels (Adresse, Zusatz, PLZ, Ort, Land). */
fieldset:has(.ccm-attribute-address-composer-wrapper) legend {
    display: none;
}

/* Kontaktformular schmaler als die volle Spaltenbreite – nur ab Tablet,
   auf dem Handy braucht es die ganze Breite. */
@media (min-width: 768px) {
    .ccm-block-express-form {
        width: 60%;
    }
}

/* ── "Sidebar Blog" (Page List template sidebar_blog) ───────────
   White sidebar card with the rainbow edge: "Mein Blog", the newest
   entry (title + first lines) and "Alle Einträge". ─────────────── */
.sidebar-blog {
    position: relative;
    background: #fff;
    padding: 1.6rem 1.5rem 1.2rem;
    margin-bottom: 1.5rem;
}

.sidebar-blog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--rainbow-line);
}

.sidebar-blog-title {
    font-size: 1.8rem;
    margin: 0 0 1rem;
}

.sidebar-blog-post {
    display: block;
    color: var(--color-rule);
    text-decoration: none;
}

.sidebar-blog-post + .sidebar-blog-post {
    margin-top: 1rem;
}

.sidebar-blog-post:hover {
    color: var(--color-rule);
    text-decoration: none;
}

.sidebar-blog-post-title {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.45rem;
    line-height: 1.2;
    text-wrap: balance;
}

.sidebar-blog-post:hover .sidebar-blog-post-title {
    color: var(--rainbow-red-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.sidebar-blog-post-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-ui);
    line-height: 1.5;
    color: var(--color-text);
}

.sidebar-blog-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    margin-top: 1.1rem;
    padding-top: 0.25rem;
    border-top: 1px solid;
    border-image: var(--rainbow-line) 1;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-ui);
    color: var(--color-rule);
    text-decoration: none;
}

.sidebar-blog-all svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
    flex: none;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sidebar-blog-all:hover {
    color: var(--rainbow-red-text);
    text-decoration: none;
}

.sidebar-blog-all:hover svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-blog-all:hover svg {
        transform: none;
    }
}

/* ── "Weitersagen" (Share-This-Page template weitersagen) ───────
   A small white card with the rainbow edge that names the article; the
   services as labelled rows divided by rainbow lines; "Link kopieren";
   on phones a large violet "Teilen …" for the native share sheet. ── */
.share-tell {
    position: relative;
    background: #fff;
    padding: 1.6rem 1.5rem 1.2rem;
    margin-bottom: 1.5rem;
}

.share-tell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--rainbow-line);
}

.share-tell svg {
    width: 1.35em;
    height: 1.35em;
    fill: currentColor;
    flex: none;
}

.share-tell-title {
    font-size: 1.8rem;
    margin: 0 0 0.35rem;
}

.share-tell-text {
    margin: 0 0 1.1rem;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text);
}

.share-tell-text em {
    font-style: normal;
    font-family: var(--font-serif);
    color: var(--color-rule);
}

.share-tell-native {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 56px;
    margin-bottom: 1rem;
    border: 0;
    border-radius: 0;
    background: var(--rainbow-violet);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}

.share-tell-native[hidden] {
    display: none;
}

.share-tell-native:hover {
    background: #5a0791;
}

.share-tell-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.share-tell-list li + li {
    border-top: 1px solid;
    border-image: var(--rainbow-line) 1;
}

/* A native share sheet already lists Facebook, LinkedIn, mail and
   copying the link: only the "Teilen …" button remains. */
.share-tell.has-native .share-tell-list,
.share-tell.has-native .share-tell-status {
    display: none;
}

.share-tell.has-native .share-tell-native {
    margin-bottom: 0.3rem;
}

.share-tell-list li > a,
.share-tell-list li > button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 50px;
    padding: 0.25rem 0.1rem;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--color-rule);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.share-tell-list li > a::after,
.share-tell-list li > button::after {
    content: '';
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.share-tell-list li > a:hover,
.share-tell-list li > button:hover {
    color: var(--rainbow-red-text);
    text-decoration: none;
}

.share-tell-list li > a:hover::after,
.share-tell-list li > button:hover::after {
    transform: translateX(3px) rotate(45deg);
}

.share-tell-status {
    min-height: 1.4em;
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--rainbow-green-text);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .share-tell-list li > a::after,
    .share-tell-list li > button::after {
        transition: none;
    }
}

/* ── Contact form "Gespräch" (Express Form template gespraech) ──
   The message first, as the main field with a rainbow top edge; name and
   e-mail side by side; phone and address folded under "Telefon und
   Adresse (freiwillig)". Reordering and folding: view.js. ────────── */
.ccm-block-express-form.contact-talk {
    width: auto;
    max-width: 44rem;
}

.contact-talk-head h1,
.contact-talk-sent h1,
.contact-talk-head h2,
.contact-talk-sent h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.1rem);
    margin: 0 0 0.4rem;
}

.contact-talk-head p {
    margin: 0 0 1.75rem;
    font-size: var(--fs-article);
}

.contact-talk-sent {
    padding: 1rem 0 2rem;
    font-size: var(--fs-article);
}

.contact-talk-error {
    --bs-alert-border-radius: 0;
    border-radius: 0;
    border: 0;
    border-top: 4px solid var(--rainbow-red);
    background: #fff;
    color: var(--color-rule);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
}

.contact-talk .ccm-dashboard-express-form > fieldset {
    display: flex;
    flex-direction: column;
    border: 0;
    margin: 0;
    padding: 0;
}

.contact-talk .mb-3 {
    margin-bottom: 1.35rem !important;
}

.contact-talk .form-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-ui);
    color: var(--color-rule);
    margin-bottom: 0.4rem;
}

/* All visible top-level fields are required; view.js sets aria-required. */
.contact-talk .text-muted.small {
    display: none;
}

.contact-talk .form-control,
.contact-talk .form-select {
    min-height: 52px;
    font-size: var(--fs-body);
}

.contact-talk-message .form-label {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.55rem;
}

.contact-talk-message textarea.form-control {
    min-height: 14rem;
    padding: 1rem 1.1rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.5;
    border: 0;
    border-radius: 0;
    border-top: 6px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--rainbow-line) border-box;
    box-shadow: inset 0 0 0 1px var(--color-field-border);
}

.contact-talk-message textarea.form-control:focus {
    box-shadow: inset 0 0 0 2px var(--rainbow-violet), 0 0 0 3px rgba(114, 9, 183, 0.18);
}

.contact-talk-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
}

.contact-talk-more {
    margin: 0.25rem 0 1.75rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.contact-talk-more summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-ui);
    color: var(--color-rule);
}

.contact-talk-more summary::-webkit-details-marker {
    display: none;
}

.contact-talk-more summary::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

.contact-talk-more[open] summary::before {
    transform: rotate(45deg);
}

.contact-talk-more summary span {
    font-weight: 400;
    color: var(--color-muted);
    font-size: var(--fs-meta);
}

.contact-talk-more-body {
    padding: 0.25rem 0 0.5rem;
}

.contact-talk fieldset fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.contact-talk .ccm-attribute-address-composer-wrapper {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 1.25rem;
}

.contact-talk .ccm-attribute-address-line {
    grid-column: 1 / -1;
}

.contact-talk .ccm-attribute-address-line:has([name$="[postal_code]"]) {
    grid-column: 1;
}

.contact-talk .ccm-attribute-address-line:has([name$="[city]"]) {
    grid-column: 2;
}

.contact-talk-privacy {
    margin: 0 0 1rem;
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.contact-talk-privacy a {
    color: inherit;
    text-decoration: underline;
}

.contact-talk .form-actions .btn {
    min-height: 60px;
    padding: 0 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    --bs-btn-bg: var(--rainbow-violet);
    --bs-btn-border-color: var(--rainbow-violet);
    --bs-btn-hover-bg: #5a0791;
    --bs-btn-hover-border-color: #5a0791;
}

@media (max-width: 640px) {
    .contact-talk-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-talk .ccm-attribute-address-composer-wrapper {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        column-gap: 1rem;
    }

    .contact-talk .form-actions .btn {
        width: 100%;
    }
}

/* ── Buttons ─────────────────────────────────────────────────
   Bootstrap's blue rounded button replaced by the site's own:
   square, Press Black, lifting slightly into violet on hover. ── */
.btn {
    border-radius: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.7rem 1.6rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s,
                transform 0.15s, box-shadow 0.15s;
}

.btn-primary {
    --bs-btn-bg: var(--color-rule);
    --bs-btn-border-color: var(--color-rule);
    --bs-btn-color: var(--color-paper);
    --bs-btn-hover-bg: var(--rainbow-violet);
    --bs-btn-hover-border-color: var(--rainbow-violet);
    --bs-btn-hover-color: var(--color-paper);
    --bs-btn-active-bg: #5a0791;
    --bs-btn-active-border-color: #5a0791;
    --bs-btn-active-color: var(--color-paper);
    --bs-btn-disabled-bg: var(--color-ink);
    --bs-btn-disabled-border-color: var(--color-ink);
    --bs-btn-disabled-color: var(--color-paper);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-rule);
    --bs-btn-color: var(--color-rule);
    --bs-btn-hover-bg: var(--color-rule);
    --bs-btn-hover-border-color: var(--color-rule);
    --bs-btn-hover-color: var(--color-paper);
    --bs-btn-active-bg: var(--color-rule);
    --bs-btn-active-border-color: var(--color-rule);
    --bs-btn-active-color: var(--color-paper);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: none;
    box-shadow: none;
}

.btn:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--rainbow-violet);
    outline-offset: 3px;
}

/* ── Form fields ─────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: 0;
    border-color: var(--color-field-border);
    background-color: #fff;
    color: var(--color-rule);
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rainbow-violet);
    box-shadow: 0 0 0 3px rgba(114, 9, 183, 0.18);
}

.form-check-input {
    border-color: var(--color-field-border);
}

.form-check-input:checked {
    background-color: var(--rainbow-violet);
    border-color: var(--rainbow-violet);
}

.form-check-input:focus {
    border-color: var(--rainbow-violet);
    box-shadow: 0 0 0 3px rgba(114, 9, 183, 0.18);
}

.form-label {
    font-family: var(--font-sans);
}

/* ── Pagination (page lists) ─────────────────────────────────── */
.pagination {
    --bs-pagination-color: var(--color-ink);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-hover-color: var(--color-rule);
    --bs-pagination-hover-bg: #f3f3f3;
    --bs-pagination-hover-border-color: var(--color-border);
    --bs-pagination-focus-color: var(--color-rule);
    --bs-pagination-focus-bg: #f3f3f3;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--color-paper);
    --bs-pagination-active-bg: var(--color-rule);
    --bs-pagination-active-border-color: var(--color-rule);
    --bs-pagination-disabled-color: #8a8a8a;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-border-radius: 0;
    font-family: var(--font-sans);
}

.page-link {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Video player "Zeitungsbild" (Application\Concrete\Video\VideoCard) ──
   Headline, dateline between rainbow rules, a 4:3 poster with a Press Black
   "Abspielen" button (violet on hover, like the buttons), the source as a
   caption. js/video-card.js swaps the poster for the player on click. */
.mv {
    margin: 0 0 2.5rem;
}

.mv-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1.15;
    margin: 0 0 0.9rem;
}

.mv-dateline {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.55rem 0;
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    color: var(--color-muted);
}

.mv-dateline::before,
.mv-dateline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rainbow-line);
}

.mv-dateline::before { top: 0; }
.mv-dateline::after { bottom: 0; }

.mv-dateline b {
    font-weight: 600;
    color: var(--color-ink);
}

.mv-figure {
    margin: 0;
}

.mv-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #111;
}

.mv-frame,
.mv-player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.mv-frame {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.mv-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mv-frame:hover img {
    transform: scale(1.02);
}

.mv-frame:focus-visible {
    outline: 2px solid var(--rainbow-violet);
    outline-offset: 3px;
}

/* Without a poster (e.g. YouTube): a dark frame with a thin rainbow edge. */
.mv-frame--noposter {
    background: #111 linear-gradient(to right, #ff0000, #ff8c00, #ffea00, #1cd11c, #0080ff, #4b0082, #9400d3) top / 100% 3px no-repeat;
}

.mv-play {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0 1.2rem 0 0.9rem;
    background: var(--color-rule);
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mv-duration {
    font-weight: 400;
    opacity: 0.8;
}

.mv-frame:hover .mv-play,
.mv-frame:focus-visible .mv-play {
    background: var(--rainbow-violet);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mv-frame:active .mv-play {
    background: #5a0791;
    transform: none;
    box-shadow: none;
}

.mv-player {
    background: #000;
    object-fit: contain;
}

/* Video files and streams take their own shape (16:9 TV, 4:3 archive, …):
   the browser reads it from the video (or its poster); 16:9 until it knows. */
.mv-stage--video {
    aspect-ratio: auto;
}

.mv-stage--video .mv-player {
    height: auto;
    aspect-ratio: auto 16 / 9;
}

/* Edit mode: a still frame instead of the live player. */
.mv-frame--edit { cursor: default; }

.mv-edit-label {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.5rem 0.9rem;
    background: var(--color-rule);
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
}

.mv-fallback {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.7rem 1.2rem;
    background: var(--color-rule);
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-weight: 600;
}

.mv-source,
.mv-note {
    margin: 0.6rem 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--color-muted);
}

.mv-source { margin-top: 0.75rem; }

.mv-source a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
    .mv-frame img,
    .mv-play {
        transition: none;
    }

    .mv-frame:hover img {
        transform: none;
    }
}

@media (max-width: 560px) {
    .mv-play {
        left: 0.75rem;
        bottom: 0.75rem;
    }
}

/* "Video folgt": TV programme pages without a video yet
   (elements/tv_video_spot.php). Same frame, rainbow edge, no button: the
   label is plain text where the play button would sit. */
.mv-figure--pending {
    margin: 0 0 2.5rem;
}

.mv-stage--pending {
    background: #111 linear-gradient(to right, #ff0000, #ff8c00, #ffea00, #1cd11c, #0080ff, #4b0082, #9400d3) top / 100% 3px no-repeat;
}

.mv-pending {
    position: absolute;
    left: 1.25rem;
    bottom: 1.1rem;
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.1;
    color: rgba(250, 250, 248, 0.82);
}