/* Unfallmeldungen DE -- visual identity
 *
 * The German edition's own character, layered on top of the Swiss structure
 * rather than replacing it. Nothing here changes markup, layout boxes or ad
 * containers: every rule paints, and the ones that could have moved something
 * use background layers and pseudo-elements instead of borders or padding.
 *
 * Four ideas, and no more than four:
 *
 *   1. a schwarz-rot-gold keyline under the brand band
 *   2. a red spine down the leading edge of every article card
 *   3. gold as the "current / fresh" marker, never as text
 *   4. one red, replacing the eleven the fork inherited
 *
 * Enqueued last, as "umde-identity", so it overrides css/theme.css without
 * needing !important. If a rule here needs !important, the rule it is fighting
 * belongs in this file instead.
 */

/* ==========================================================================
   1. The keyline
   ==========================================================================
   Painted as a background layer, so it costs no height and cannot shift the
   header. Two homes, because the header is two different objects: on desktop
   the brand band sits above the nav, on mobile the brand band collapses to
   nothing (.dekstop-team-list is display:none under 768px) and .header-bar is
   the only header row there is.

   It sits at the TOP of the masthead, not between the brand band and the nav.
   Under the brand band it failed: --umde-black is #12181f, which is exactly the
   nav band's own colour, so the first third dissolved into the band below it and
   the keyline read as a stray red-and-gold bar rather than as a flag. Against
   the white above, all three thirds read.
   -------------------------------------------------------------------------- */

@media (min-width: 978px) {
    #g-header .top-bar {
        background-image: var(--umde-keyline);
        background-repeat: no-repeat;
        background-size: 100% var(--umde-keyline-height);
        background-position: 0 0;
    }
}

@media (max-width: 977px) {
    #g-header .header-bar {
        background-image: var(--umde-keyline);
        background-repeat: no-repeat;
        background-size: 100% var(--umde-keyline-height);
        background-position: 0 0;
    }
}

/* ==========================================================================
   2. The card spine
   ==========================================================================
   :has(> a.link) is what distinguishes an article card from the ad rows that
   share the same <ul>: index.php emits three kinds of ad <li>, and only two of
   them carry .unfall-controlled-ad-item, so testing for the link is the only
   reliable test. Browsers without :has() simply get no spine.
   -------------------------------------------------------------------------- */

.articles-list > li:has(> a.link) {
    position: relative;
}

.articles-list > li:has(> a.link)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--umde-red);
    /* Above .label-cat and .team, which sit at z-index 2. */
    z-index: 3;
    pointer-events: none;
}

/* The spine is the card's own mark, so the hero cards above the list -- which
   are a different component with their own overlay treatment -- get it too,
   on the text panel rather than over the photograph. */
.top-story-box .top-story-text {
    position: relative;
}

.top-story-box .top-story-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--umde-red);
    z-index: 3;
    pointer-events: none;
}

/* ==========================================================================
   3. Gold as the current / fresh marker
   ==========================================================================
   Gold never carries information on its own. The nav marker is gold *and* the
   item is the current one; the fresh marker is gold *and* it says NEU. Remove
   the colour and nothing is lost.
   -------------------------------------------------------------------------- */

/* Headline underline on card hover. Underlining the text rather than drawing a
   rule under the box, because h2 is a -webkit-box line clamp and a border
   would span the full card width. */
.articles-list > li:has(> a.link):hover h2 {
    text-decoration: underline;
    text-decoration-color: var(--umde-gold-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* The current nav item's dot, gold on the dark band where gold reads properly.
   The dot itself is inherited from css/theme.css; only its colour changes. */
@media (min-width: 978px) {
    #g-header .header-bar ul.main-menu > li.current-menu-item > a::before,
    #g-header .header-bar ul.main-menu > li.current_page_item > a::before {
        background: var(--umde-gold);
    }

    /* Underline the hovered nav item instead of only tinting its background,
       which is invisible against the dark band at a glance. */
    #g-header .header-bar ul.main-menu > li > a {
        box-shadow: inset 0 -3px 0 0 transparent;
        transition: box-shadow var(--umde-fast) var(--umde-ease);
    }

    #g-header .header-bar ul.main-menu > li > a:hover,
    #g-header .header-bar ul.main-menu > li > a:focus-visible {
        box-shadow: inset 0 -3px 0 0 var(--umde-gold);
    }
}

/* The region rail: gold underline on the chip you are about to click, so the
   rail stops reading as an undifferentiated row of two-letter codes. */
#g-header .categories-list-desktop .flags-list li a .region-abbreviation {
    box-shadow: inset 0 -2px 0 0 transparent;
    transition: box-shadow var(--umde-fast) var(--umde-ease);
}

#g-header .categories-list-desktop .flags-list li a:hover .region-abbreviation,
#g-header .categories-list-desktop .flags-list li a:focus-visible .region-abbreviation {
    box-shadow: inset 0 -2px 0 0 var(--umde-gold);
}

/* The fresh marker. content-post.php sets data-umde-fresh on cards published
   inside the window from Options -> Design; the window can be set to 0 to turn
   the whole thing off, in which case the attribute is never emitted and these
   rules match nothing. */
/* .meta is a flex row whose only real child is .date. A pseudo-element is the
   first or last child of its box, so both markers need an explicit order to
   land after the date rather than around it. */
.articles-list > li[data-umde-fresh] .meta::before {
    content: "";
    order: 2;
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--umde-gold-ink);
    flex: 0 0 auto;
}

.articles-list > li[data-umde-fresh] .meta::after {
    content: "NEU";
    order: 3;
    color: var(--umde-gold-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==========================================================================
   4. One red
   ==========================================================================
   The pill colour was an inline style attribute in content-post.php, which no
   stylesheet could reach; it is a class now. The region badge's #cc0000 and the
   search button's #d81e05 were two more strays.
   -------------------------------------------------------------------------- */

/* A modifier, not a rule on .label-cat itself. Two reasons: styles.css has
   colour-coded variants (--news, --warning, --success) that a blanket rule would
   flatten, and in article listings theme.css deliberately forces the pill to a
   translucent slate with !important so it reads over a photograph. This matches
   the old inline style attribute's reach exactly -- it wins over the variants in
   styles.css by load order, and still loses to that !important. */
.label-cat--accent {
    background-color: var(--umde-red);
}

.region-badge__code {
    color: var(--umde-red);
}

/* ==========================================================================
   5. The header rows sit in the content column
   ==========================================================================
   The bands were full-bleed with a 14px inset, so the nav ended around x=860
   while the cards below started at x=445 and ended at x=1485. Two different
   grids in the same eyeful, which is what made the empty right-hand side read
   as a mistake rather than as space.

   Backgrounds stay full-bleed -- they are on .top-bar / .header-bar /
   .categories-header-part, not on these inner containers. !important is
   unavoidable here: the 2026-07-29 "force full-width bands" patch sets
   width:100% !important and max-width:none !important on exactly these
   elements, and the rail carries margin:0 !important.
   -------------------------------------------------------------------------- */

@media (min-width: 978px) {
    #g-header .top-bar > .container--fluid,
    #g-header .header-bar > .container {
        max-width: var(--umde-column) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #g-header .categories-list-desktop ul.flags-list {
        max-width: var(--umde-column) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Last 37px of the mismatch: on the listing templates css/theme.css gives both
   .main--container and the .container inside it "width:94%; max-width:1240px",
   so the inner one resolves to 94% of 1240 = 1166 and the cards sat 37px inside
   the bands on each side. The outer element already does the capping and the
   centring; the inner one only has to fill it. */
@media (min-width: 978px) {
    body.blog .main--container .container,
    body.home .main--container .container,
    body.category .main--container .container,
    body.archive .main--container .container,
    body.search .main--container .container {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Fill the row rather than leaving the tail empty. flex:1 1 auto, not
   space-between: items grow from their own content width, so a long label keeps
   more room than a short one, and if an operator adds enough menu entries to
   overflow they shrink instead of being pushed off both edges. That edge-clip is
   a real failure this theme has already had -- css/theme.css:1630 documents it,
   which is why the distribution is gated to widths where the column has slack. */
@media (min-width: 1400px) {
    #g-header .header-bar ul.main-menu > li {
        flex: 1 1 auto !important;
    }

    #g-header .header-bar ul.main-menu > li > a {
        justify-content: center !important;
        text-align: center;
    }

    #g-header .categories-list-desktop ul.flags-list li {
        flex: 1 1 auto !important;
    }

    #g-header .categories-list-desktop ul.flags-list li a {
        text-align: center;
    }
}

/* ==========================================================================
   6. The bottom of a Symbolbild belongs to the pipeline
   ==========================================================================
   Every Symbolbild the pipeline renders has a caption burned into the image:
   a red SYMBOLBILD pill, the category word, and the unfallmeldungen.com
   lockup, all across the bottom third of the PNG. The theme was putting its own
   labels and headline in the same corner, so the two collided and the category
   appeared twice.

   One rule fixes all of it: the theme paints nothing over the bottom of a
   thumbnail. Labels move to the top edge, which is always clean, and the hero
   headline moves off the image entirely.
   -------------------------------------------------------------------------- */

/* Hero: the headline becomes a panel under the picture instead of an overlay.
   The scrim goes with it -- there is nothing left to make legible. */
body.home .main-slideshow .top-story-box {
    min-height: 0;
    background: var(--umde-surface);
    border: 1px solid var(--umde-hairline);
    box-shadow: var(--umde-shadow-card);
}

body.home .main-slideshow .top-story-text {
    position: relative;
    inset: auto;
    background: none;
    padding: 14px 18px 16px;
}

/* With the headline out of the picture the two boxes no longer end at the same
   line -- one headline wraps, the other does not. Stretch them to match so the
   pair reads as one unit. */
@media (min-width: 768px) {
    body.home .main-slideshow .row {
        display: flex;
        align-items: stretch;
    }

    body.home .main-slideshow .row > [class*="col6"] {
        display: flex;
        float: none;
    }

    body.home .main-slideshow .top-story-box {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    body.home .main-slideshow .top-story-text {
        flex: 1 1 auto;
    }
}

body.home .main-slideshow .top-story-text h2 {
    color: var(--umde-ink);
    text-shadow: none;
    font-size: 22px;
}

body.home .main-slideshow .top-story-text span {
    color: var(--umde-ink-muted);
}

@media (max-width: 767px) {
    body.home .main-slideshow .top-story-box {
        min-height: 0;
    }

    body.home .main-slideshow .top-story-text {
        padding: 12px 14px 14px;
    }
}

/* Cards: region badge to the top left, category pill to the top right. The
   selector carries two type selectors purely to outspecify the six
   body.<template> rules in css/theme.css that pin these to bottom:10px. */
.articles-list > li > a.link .label-cat {
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
}

/* The region badge sits opposite the pill, and leans into what these two
   letters actually are: BW, BY, NW are the Kfz-Kennzeichen prefixes Germans
   already read off number plates. So it is a plate -- white, dark keyline,
   tight caps -- rather than a floating white blob over a photograph. */
.articles-list > li > a.link .thumb .region-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    margin: 0;
    padding: 3px 8px;
    background: var(--umde-surface);
    border: 1.5px solid var(--umde-slate-900);
    border-radius: var(--umde-radius-xs);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

.articles-list > li > a.link .thumb .region-badge__code {
    font-size: 15px;
    letter-spacing: .04em;
}

/* ==========================================================================
   7. An unconfigured ad slot is not a grey box
   ==========================================================================
   .ad-banner--grey paints #f4f4f4, two 1px rules and a shadow around whatever
   it holds. On this site it holds <div id="adnz_wideboard_2"></div>, and
   Audienzz is not configured, so it painted three empty 22px-tall grey bars
   down the article. The theme's own rule is that an unconfigured identifier
   renders nothing; the scripts followed it, the containers did not.

   Chrome is stripped rather than the box being hidden. display:none on an ad
   container is how you get an ad that never renders: the slot is empty at first
   paint even when Audienzz *is* configured, so hiding it would keep the ad
   script from ever measuring it. Stripping the decoration collapses the box to
   nothing while it is empty, and the moment anything is injected :empty stops
   matching and the frame comes back on its own.
   -------------------------------------------------------------------------- */

.ad-banner--grey:has(.ad-area > div[id^="adnz_"]:empty),
.ad-banner:has(> .ad-area > div[id^="adnz_"]:empty) {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   8. The article's related grid
   ==========================================================================
   sidebar.php renders nothing at all -- every line of it is commented out -- so
   on single posts the sidebar column was 340px of permanently empty page, and
   the related grid was squeezed into the remaining two thirds and left-packed.
   The column only earns its space once an ad widget is actually configured.

   Solved with a flex row rather than a :has() test, for two reasons. The obvious
   one: an auto-width flex item collapses to nothing when it is empty and takes
   its natural 300px once an ad widget is in it, so the column earns its space by
   holding something rather than by a rule trying to predict whether it will.

   The other: the :has() version of this cannot be written. A :has() may not
   contain another :has(), so testing "a sidebar with no widget in it" is invalid
   per spec -- and an invalid selector is dropped at parse time, taking its whole
   rule with it, in silence. Worth remembering: csstree-validator does not catch
   that one, so tests/check-css.py greps for it instead.
   -------------------------------------------------------------------------- */

/* css/theme.css drops the grey panel behind .main-content on every listing
   template and leaves body.single out, so the related grid was the one card list
   on the site still sitting in its own tinted box. */
body.single .main-content {
    background: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 1000px) {
    body.single .main-content > .container > .row {
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }

    body.single .main-content > .container > .row > .content-col {
        flex: 1 1 auto;
        width: auto !important;
        float: none !important;
    }

    body.single .main-content > .container > .row > .sidebar-col {
        flex: 0 0 auto;
        width: auto !important;
        float: none !important;
    }
}

/* ==========================================================================
   9. Page templates get the same column as everything else
   ==========================================================================
   css/theme.css centres the listing templates (line ~876) and body.single
   (line ~1816), and body.page is in neither list -- so every static page kept
   the theme's original "width:995px; float:left" column: pinned to the left
   edge with the rest of the viewport left empty. Most visible on
   /unfallkarte-live/, where a map that wants room was squeezed into 995px with
   650px of grey beside it, but Impressum, Über uns and the rest had it too.

   :not(.home) because a static front page carries both classes, and the
   listing rules above already own that case.
   -------------------------------------------------------------------------- */

@media (min-width: 978px) {
    body.page:not(.home) .main--container,
    body.page:not(.home) .main-content {
        float: none !important;
        width: auto !important;
    }

    /* The theme gives .main--container a 10px left margin, which centres the
       column inside 10..1920 instead of 0..1920 and lands it 5px right of the
       header bands. Five pixels is exactly the kind of misalignment that reads
       as sloppy without being obvious enough to find. */
    body.page:not(.home) .main--container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.page:not(.home) .main-content > .container,
    body.page:not(.home) main > .container {
        float: none !important;
        width: 94% !important;
        max-width: var(--umde-column) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* The map shortcode is sitting in a Preformatted block: the page body was saved
   as a <pre> rather than as plain text, so the map inherits monospace,
   white-space:pre and its own scroll container. The block type is the real fix
   -- Options -> the page body should be exactly [incident_map] -- but a tool
   this size should not be at the mercy of which block someone picked. */
.wp-block-preformatted:has(> .incident-map-wrap),
pre:has(> .incident-map-wrap) {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    white-space: normal;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* The heading single.php now prints above the grid. */
.related-heading {
    max-width: var(--umde-column);
    margin: 4px 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--umde-ink-muted);
}

.related-heading::after {
    content: "";
    display: block;
    width: 34px;
    height: var(--umde-keyline-height);
    margin-top: 7px;
    background: var(--umde-red);
}

/* ==========================================================================
   Accessibility
   ==========================================================================
   Not identity as such, but this is the file that owns the accent colour, and
   these two are the accent colour's job.
   -------------------------------------------------------------------------- */

/* The theme shipped no visible focus style at all -- keyboard users had to
   guess. Gold, at 3px, on everything focusable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--umde-gold-ink);
    outline-offset: 2px;
}

/* On the dark bands the light gold is the readable one. */
#g-header .header-bar a:focus-visible,
#g-header .categories-header-part a:focus-visible,
#g-header .categories-list-mobile a:focus-visible,
.footer a:focus-visible {
    outline-color: var(--umde-gold);
}

/* .nav-new-badge pulses forever and had no reduced-motion escape, unlike the
   Breaking News dot next to it. */
@media (prefers-reduced-motion: reduce) {
    .nav-new-badge {
        animation: none;
    }

    .articles-list > li:has(> a.link),
    #g-header .header-bar ul.main-menu > li > a,
    #g-header .categories-list-desktop .flags-list li a .region-abbreviation {
        transition: none;
    }
}