.justified-columns {
    text-align: justify;

    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

/* All article headings render at font-weight 900, matching the rich editor. */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    font-weight: 900;
}

/* main.css gives every `p`/`.t1` a 15px vertical margin; drop it inside list items. */
.article li p,
.article li .t1 {
    margin: 0;
}

@media (min-width:640px) {
    .columns-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .columns-3 {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .columns-4 {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

/* Text-2 panel "Hintergrund grau" checkbox — paints the article container in brand grey */
.article.article-bg-gray {
    background-color: #F7F5F2;
    padding: 20px;
}

/* The grey padding stops the last child's bottom margin collapsing out of the article,
   so it would render inside the grey box — strip it; the panel gap lives on the article (mb-11). */
.article.article-bg-gray > :last-child {
    margin-bottom: 0;
}

/* Tailwind-scale mb-11 (2.75rem = 44px) — there is no Tailwind build on the old site, so it's
   defined here, in px because the old site's `html { font-size: 62.5% }` skews rem values.
   Scoped to .article so it outranks main.css's `.article:first-of-type { margin-bottom: 30px }`. */
.article.mb-11 {
    margin-bottom: 44px;
}

/* Rich editor (tiptap) tables don't wrap the header row in <thead> the way Froala did,
   so legacy `.table thead th` rules miss them — match the look on the first <tr> with <th> cells */
.table > tbody > tr:first-child > th {
    background: #e4e0dc;
    font-weight: 900;
    padding-top: 22px;
    padding-bottom: 20px;
}

.table + .table {
    margin-top: 30px;
}

/* IconPickerPlugin / LinkStylePlugin — SVG-based contact icons (form, person).
   Mirror main.css's legacy approach: parent gets `padding-left: 45px; position: relative;
   display: block`, ::before is absolutely positioned at left: 0 / top: -3px. main.css's
   universal contact-* selector list already handles contact-person at the layout level —
   we only need to (a) replicate the same rule for contact-form (it was never in the list)
   and (b) swap contact-person's sprite background for the new SVG. */
.contact-form {
    padding-left: 45px;
    position: relative;
    display: block;
}

.contact-form::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background-image: url(/theme/img/contact-form.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.contact-person::before {
    background-image: url(/theme/img/contact-person.svg);
    background-position: center;
    background-size: contain;
}

/* Legacy main.css forces every `.contact-* a:not(.btn)` anchor to gray (#3c3d41).
   The IconPickerPlugin now wraps contact-email/contact-person content in real
   anchors, so keep them in the gold link color instead of gray. */
.contact-email a:not(.btn),
.contact-person a:not(.btn) {
    color: #b19c5d;
}

.contact-email a:not(.btn):hover,
.contact-person a:not(.btn):hover {
    color: #c8b98d;
}

/* TextAlign extension sets `text-align` on the parent <p>, but `main.css` has a
   * global `img { display: block }`. Block elements ignore `text-align`, so the image
   * sticks left even when the paragraph is centered. Switch images inside aligned
   * paragraphs back to inline-block so they respond to the parent's alignment.
   */
.article p[style*="text-align"] img {
    display: inline-block;
}

/* Legacy sprite background-size is off by 1px (was 550x541) — correct it to 551x541
   so `.arrow_back_breadcrumbs`, `.caret`, and the `.navigation .btn-back::before` etc. icons
   land on the right cell of `sprite-1704357218118@2x.png` instead of being shifted 1px. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow_back_breadcrumbs,
    .caret,
    .navigation .btn-back::before,
    .navigation .news-carrousel__button__previous button::before,
    .news-carrousel__button__previous .navigation button::before {
        background-size: 551px 541px;
    }
}

/* Station logo: scale to fit either 200px wide or 50px tall, whichever hits first */
.station-logo {
    width: auto !important;
    height: auto !important;
    max-width: 200px;
    max-height: 50px;
    object-fit: contain;
}

/* Arrival teaser 3: parking row — box and (optional) headline side by side.
   `.klinik-number` was designed for short numeric labels (e.g. "834"); when the
   parking name is longer the twig switches to "P" + headline next to it. */
.parking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.parking-row .klinik-number {
    margin: 0;
    flex: 0 0 46px;
}

.parking-row .parking-headline {
    margin: 0;
}

/* News boxes: main.css fixes `.box-news` at 330px (370px ≤960px), so a long
   headline pushes the "Weiter" link past the box edge where it is invisible.
   Let the color and split boxes grow with their content instead; the flex `.row`
   then stretches the siblings in the same row to the tallest card, keeping equal
   heights. Deliberately NOT applied to `.box-news` itself: `.box-news-double
   .box-picture` and `.box-news-background .box-text` use `height: 100%`, which
   collapses inside an auto-height parent when the box is not a stretched flex child
   (e.g. the news panel renders inside a plain `.col-12`). */
.box-news-color1,
.box-news-color2,
.box-news-color3,
.box-news-split {
    height: auto;
    min-height: 330px;
}

@media (max-width: 960px) {
    .box-news-color1,
    .box-news-color2,
    .box-news-color3,
    .box-news-split {
        min-height: 370px;
    }
}

/* Photo-background news boxes have the same clipping bug, but their gradient overlay
   is `.box-text { height: 100% }`, which needs a definite parent height. Making the
   article a flex container stretches the overlay to the (now growable) box without
   percentage heights. `.box-news-double` stays fixed-height: its `.box-picture` uses
   `height: 100%` and has no equivalent escape hatch. */
.box-news-background {
    height: auto;
    min-height: 330px;
    display: flex;
}

.box-news-background > .box-text {
    height: auto;
    min-height: 330px;
}

@media (max-width: 960px) {
    .box-news-background,
    .box-news-background > .box-text {
        min-height: 370px;
    }
}