/* Individuelle Anpassungen fuer die neue TAO-Installation.
   Zunaechst bewusst leer.
   Typografie in typography.css, Header-Anpassungen in header.css. */
/* ----animated gardients centered wrapper---- */











/* ==========================================================================
   Feature-Box Korrektur Abstand oben
   ========================================================================== */

.-vertical-centered > .feature-box-text {
	display: table-cell;
	vertical-align: middle;
	width: 56.0%;
	margin: 0;
	padding: 3.0em 4% 3.0em 0;
}

/* ==========================================================================
   BUTTON 2 – FARBVARIANTE
   Klasse: rh_btn2
   ========================================================================== */

.rh_btn2 {
    --rh-b2-border: #f0ff86;
    --rh-b2-bg: #f0ff86;
    --rh-b2-text: #000000;
    --rh-b2-radius: 999px;

    --rh-b2-hover-border: #ff2097;
    --rh-b2-hover-bg: #ff2097;
    --rh-b2-hover-text: #ffffff;
}

/* ==========================================================================
   RH TABNAV
   ========================================================================== */

:root {
    --rh-tabnav-color: #3f3f3f;
    --rh-tabnav-hover-color: #007de6;
    --rh-tabnav-active-color: #3f3f3f;

    --rh-tabnav-line-color: #c8c8c8;
    --rh-tabnav-active-line-color: #c6b600;

    --rh-tabnav-font-size: 1.1em;
    --rh-tabnav-font-weight: 400;
    --rh-tabnav-letter-spacing: 0.14em;

    --rh-tabnav-padding-y: 1.15em;
    --rh-tabnav-active-line-width: 4px;
}

/* Tabnavigation */
.tab-navigation.rh-tabnav {
    margin-top: 2.25em;
    border: 0;
    border-bottom: 1px solid var(--rh-tabnav-line-color);
    text-align: center;
}

.tab-navigation.rh-tabnav ul {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

.tab-navigation.rh-tabnav li {
    flex: 1 1 0;
    margin: 0;
    padding: 0;
}

.tab-navigation.rh-tabnav a {
    position: relative;
    display: block;
    margin: 0;
    padding: var(--rh-tabnav-padding-y) 1em;
    border: 0;
    color: var(--rh-tabnav-color);
    font-size: var(--rh-tabnav-font-size);
    font-weight: var(--rh-tabnav-font-weight);
    letter-spacing: var(--rh-tabnav-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
}

.tab-navigation.rh-tabnav a:hover,
.tab-navigation.rh-tabnav a:focus {
    color: var(--rh-tabnav-hover-color);
    text-decoration: none;
    background: transparent;
}

.tab-navigation.rh-tabnav a.is-active {
    color: var(--rh-tabnav-active-color);
    background: transparent;
    box-shadow: none;
}

.tab-navigation.rh-tabnav a.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: var(--rh-tabnav-active-line-width);
    background: var(--rh-tabnav-active-line-color);
}

/* Tab-Inhaltsbereich ohne Rahmen und seitliche Innenabstände */
.main-content .tab-start.-has-border {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    border: 0;
}

/* Smartphone */
@media screen and (max-width: 599px) {
    .tab-navigation.rh-tabnav ul {
        display: block;
    }

    .tab-navigation.rh-tabnav li {
        display: block;
    }

    .tab-navigation.rh-tabnav a {
        margin: 0;
        padding: 0.8em 0.5em;
        border-bottom: 1px solid var(--rh-tabnav-line-color);
    }

    .tab-navigation.rh-tabnav a.is-active::after {
        bottom: -1px;
    }
}


/* ==========================================================================
   RH ACCORDION
   ========================================================================== */

:root {
    /* Titel */
    --rh-accordion-title-color: #284258;
    --rh-accordion-title-hover-color: #007de6;

    /* Icon links */
    --rh-accordion-icon-color: #284258;
    --rh-accordion-icon-hover-color: #007de6;

    /* Plus / Minus rechts */
    --rh-accordion-symbol-color: #284258;
    --rh-accordion-symbol-hover-color: #007de6;

    /* Lesetext */
    --rh-accordion-content-color: var(--ty-color-text);

    /* Linien */
    --rh-accordion-line-color: #b2b9c4;
    --rh-accordion-inner-line-color: #dcdcdc;

    /* Hintergründe */
    --rh-accordion-bg: #ffffff;
    --rh-accordion-hover-bg: rgba(97, 97, 97, 0.03);
}


/* Grundelement */

.main-content .ce_accordion {
    margin-bottom: 0;
    border-top: 1px solid var(--rh-accordion-line-color);
}


/* Toggler */

.main-content .ce_accordion .toggler {
    position: relative;
    margin: 0;
    padding: 1.25em 32px 1.25em 6px;
    border: 0;
    border-radius: 0;
    color: var(--rh-accordion-title-color);
    font-size: var(--ty-h2);
    font-weight: 500;
    line-height: 1.2;
    background: var(--rh-accordion-bg);
    cursor: pointer;
}


/* Accordion mit Icon */

.main-content .ce_accordion[data-icon],
.main-content .ce_accordion[class^="icon-"],
.main-content .ce_accordion[class*=" icon-"] {
    position: relative;
}

.main-content .ce_accordion[data-icon] .toggler,
.main-content .ce_accordion[class^="icon-"] .toggler,
.main-content .ce_accordion[class*=" icon-"] .toggler {
    padding-left: calc(6px + 1.7em);
}

.main-content .ce_accordion[data-icon]::before,
.main-content .ce_accordion[class^="icon-"]::before,
.main-content .ce_accordion[class*=" icon-"]::before {
    position: absolute;
    top: 1.25em;
    left: 6px;
    z-index: 1;
    margin: 0;
    color: var(--rh-accordion-icon-color);
    font-size: var(--ty-h2);
    line-height: 1.2;
}


/* Titel Hover / Focus */

.main-content .ce_accordion .toggler:hover,
.main-content .ce_accordion .toggler:focus {
    color: var(--rh-accordion-title-hover-color);
    text-decoration: none;
    background-color: var(--rh-accordion-hover-bg);
}

.main-content .ce_accordion .toggler:focus-visible {
    outline: 2px solid var(--rh-accordion-line-color);
    outline-offset: -2px;
}


/* Icon Hover / Focus */

.main-content .ce_accordion[data-icon]:has(.toggler:hover)::before,
.main-content .ce_accordion[data-icon]:has(.toggler:focus)::before,
.main-content .ce_accordion[class^="icon-"]:has(.toggler:hover)::before,
.main-content .ce_accordion[class^="icon-"]:has(.toggler:focus)::before,
.main-content .ce_accordion[class*=" icon-"]:has(.toggler:hover)::before,
.main-content .ce_accordion[class*=" icon-"]:has(.toggler:focus)::before {
    color: var(--rh-accordion-icon-hover-color);
}


/* Plus / Minus */

.main-content .ce_accordion .toggler::after {
    position: absolute;
    top: 50%;
    right: 6px;
    display: block;
    margin: 0;
    color: var(--rh-accordion-symbol-color);
    font-family: "RockSolid Icons";
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    content: "\2b";
    text-indent: 0;
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.main-content .ce_accordion .toggler.ui-accordion-header-active::after,
.main-content .ce_accordion .toggler.ui-state-active::after {
    content: "\2212";
}

.main-content .ce_accordion .toggler:hover::after,
.main-content .ce_accordion .toggler:focus::after {
    color: var(--rh-accordion-symbol-hover-color);
}


/* Geöffneter Toggler */

.main-content .ce_accordion .toggler.ui-accordion-header-active,
.main-content .ce_accordion .toggler.ui-state-active {
    border-bottom: 1px solid var(--rh-accordion-inner-line-color);
    text-decoration: none;
    background: var(--rh-accordion-bg);
}


/* Inhalt / Lesetext */

.main-content .ce_accordion .accordion {
    position: relative;
    margin: 0;
    padding: 2.25em 0 2.5em;
    border: 0;
    border-radius: 0;
    color: var(--rh-accordion-content-color);
    background: var(--rh-accordion-bg);
}


/* Abschlusslinie */

.main-content .ce_accordion:not(:has(~ .ce_accordion)),
.main-content .ce_accordion.lastline {
    border-bottom: 1px solid var(--rh-accordion-line-color);
}


/* Smartphone */

@media screen and (max-width: 599px) {
    .main-content .ce_accordion .toggler {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .main-content .ce_accordion[data-icon]::before,
    .main-content .ce_accordion[class^="icon-"]::before,
    .main-content .ce_accordion[class*=" icon-"]::before {
        top: 1em;
    }

    .main-content .ce_accordion .accordion {
        padding-top: 1.5em;
        padding-bottom: 1.75em;
    }
}

/* ==========================================================================
   RH LINIEN
   Horizontale Linien mit expliziter RH-Klasse

   Anwendung im TinyMCE:
   <hr class="rh-line">
   <hr class="rh-line-accent">

   Normale <hr>-Elemente ohne RH-Klasse bleiben unverändert.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       STANDARDLINIE
       ---------------------------------------------------------------------- */

    --rh-line-color: #b2b9c4;
    --rh-line-width: 1px;
    --rh-line-length: 100%;

    --rh-line-margin-top: 1.0em;
    --rh-line-margin-bottom: 1.3em;


    /* ----------------------------------------------------------------------
       AKZENTLINIE
       ---------------------------------------------------------------------- */

    --rh-line-accent-color: #de782b;
    --rh-line-accent-width: 1px;
    --rh-line-accent-length: 120px;

	--rh-line-accent-margin-top: 0.3em;
    --rh-line-accent-margin-bottom: 1.3em;


    /* ----------------------------------------------------------------------
       SMARTPHONE
       ---------------------------------------------------------------------- */

    --rh-line-mobile-length: 100%;
    --rh-line-mobile-margin-top: 1.75em;
    --rh-line-mobile-margin-bottom: 1.75em;

    --rh-line-accent-mobile-length: 80px;
    --rh-line-accent-mobile-margin-top: 1.75em;
    --rh-line-accent-mobile-margin-bottom: 1.75em;

}


/* ==========================================================================
   1. STANDARDLINIE
   ========================================================================== */

.main-content hr.rh-line {

    display: block;

    width: var(--rh-line-length);
    max-width: 100%;
    height: 0;

    margin-top: var(--rh-line-margin-top);
    margin-right: 0;
    margin-bottom: var(--rh-line-margin-bottom);
    margin-left: 0;

    padding: 0;

    border: 0;

    border-top:
        var(--rh-line-width)
        solid
        var(--rh-line-color);

    background: none;

}


/* ==========================================================================
   2. AKZENTLINIE
   ========================================================================== */

.main-content hr.rh-line-accent {

    display: block;

    width: var(--rh-line-accent-length);
    max-width: 100%;
    height: 0;

    margin-top: var(--rh-line-accent-margin-top);
    margin-right: 0;
    margin-bottom: var(--rh-line-accent-margin-bottom);
    margin-left: 0;

    padding: 0;

    border: 0;

    border-top:
        var(--rh-line-accent-width)
        solid
        var(--rh-line-accent-color);

    background: none;

}


/* ==========================================================================
   3. FEATURE-BOX MIT GEFLOATETEM BILD

   TAO setzt für normale <hr> global clear: both.
   Innerhalb der Feature-Box würde die Linie dadurch unter das gefloatete
   Bild springen. Für die beiden RH-Linien wird dieses Verhalten deshalb
   gezielt aufgehoben.
   ========================================================================== */

.main-content .feature-box-text hr.rh-line,
.main-content .feature-box-text hr.rh-line-accent {
    clear: none;
}


/* ==========================================================================
   4. SMARTPHONE
   ========================================================================== */

@media screen and (max-width: 599px) {

    .main-content hr.rh-line {

        width: var(--rh-line-mobile-length);

        margin-top: var(--rh-line-mobile-margin-top);
        margin-bottom: var(--rh-line-mobile-margin-bottom);

    }


    .main-content hr.rh-line-accent {

        width: var(--rh-line-accent-mobile-length);

        margin-top: var(--rh-line-accent-mobile-margin-top);
        margin-bottom: var(--rh-line-accent-mobile-margin-bottom);

    }

}




/* ==========================================================================
   RH BOXES – FARBKLASSEN
   Diesen Block in custom.css einfügen.

   Anwendung in Contao:
   rh-box1 rh-bg-lila
   rh-box2-l rh-bg-blau
   rh-box2-r rh-bg-weiss
   ========================================================================== */

.rh-bg-lila {
    --rh-box-bg: #dcdcea;
}

.rh-bg-blau {
    --rh-box-bg: #b8ceed;
}

.rh-bg-weiss {
    --rh-box-bg: #ffffff;
}

.rh-bg-transparent {
    --rh-box-bg: transparent;
}


/* ==========================================================================
   FEATURE-BOX – TEXT OBEN BÜNDIG

   Zusatzklasse im Contao-Feld CSS-Klasse:
   rh-feature-top

   Gilt für Bild rechts oben und Bild links oben.
   ========================================================================== */

.rh-feature-top > .feature-box-text {
    margin-top: 0;
}

/* ==========================================================================
   FEATURE-BOX – BILDSCHATTEN

   Zusatzklasse im Contao-Feld CSS-Klasse:
   rh-f-box-shadow

   TAO setzt auf der Feature-Box overflow: hidden.
   Für den Bildschatten wird dies bei dieser Zusatzklasse gezielt aufgehoben.
   ========================================================================== */

.feature-box.rh-f-box-shadow {
    overflow: visible;
}

.feature-box.rh-f-box-shadow > .feature-box-image img {
    box-shadow:
        8px
        8px
        24px
        rgba(40, 66, 88, 0.18);
}


/* ==========================================================================
   SMARTPHONE – KEIN SCHATTEN
   ========================================================================== */

@media screen and (max-width: 599px) {

    .feature-box.rh-f-box-shadow {
        overflow: hidden;
    }

    .feature-box.rh-f-box-shadow > .feature-box-image img {
        box-shadow: none;
    }

}


/* ==========================================================================
   RH FILTER
   Allgemeiner Filter für Portfolio, Events, News usw.

   - folgt der zentralen RH-Typografie
   - keine TAO-Button-Flächen
   - dynamische Unterlinie
   - gleiche Breite wie der Inhaltsbereich / das Portfolio
   - berücksichtigt TAO "Textfarbe invertieren"
   ========================================================================== */

.rh-filter {

    /* ----------------------------------------------------------------------
       Zentrale Einstellungen
       ---------------------------------------------------------------------- */

    --rh-filter-color:
        var(--ty-color-text, #284258);

    --rh-filter-line-color:
        currentColor;

    --rh-filter-font-size:
        var(--ty-current-size, 18px);

    --rh-filter-font-weight: 400;

    --rh-filter-line-height: 1.3;

    --rh-filter-line-width: 1px;

    --rh-filter-line-gap: 9px;

    --rh-filter-transition:
        240ms cubic-bezier(.2, .65, .25, 1);


    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    display: flex;

    align-items: flex-start;

    /*
     * Die Navigation verteilt sich über exakt
     * die verfügbare Breite des Portfolio-Grids.
     */
    justify-content: space-between;

    gap: 24px;

    width: 100%;

    margin:
        0 0 34px;

    padding:
        0;

    color:
        var(--rh-filter-color);

}


/* ==========================================================================
   BUTTON-RESET

   Entfernt TAO-/globale Button-Darstellung vollständig innerhalb des Filters.
   ========================================================================== */

.rh-filter .rh-filter__button {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin: 0;

    padding:
        0
        0
        var(--rh-filter-line-gap);

    /*
     * Wichtig:
     * Keine obere Linie und keine Rahmen aus TAO.
     */
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    border-radius: 0 !important;

    /*
     * Keine blaue oder sonstige Button-Fläche.
     */
    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

    /*
     * Folgt unserer zentralen Typografie.
     */
    color: inherit !important;

    font-family:
        var(--ty-font, inherit);

    font-size:
        var(--rh-filter-font-size);

    font-weight:
        var(--rh-filter-font-weight);

    line-height:
        var(--rh-filter-line-height);

    /*
     * TAO darf keine Versalien oder eigenes
     * Letter-Spacing erzwingen.
     */
    text-transform: none;

    letter-spacing: normal;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

}


/* ==========================================================================
   TAO-PSEUDOELEMENTE NEUTRALISIEREN

   Falls eine globale Button-Regel ein ::before verwendet,
   erscheint damit keine obere Linie.
   ========================================================================== */

.rh-filter .rh-filter__button::before {

    content: none !important;

    display: none !important;

}


/* ==========================================================================
   DYNAMISCHE UNTERLINIE

   Funktioniert wie eine Navigationslinie:
   Mitte -> volle Breite.
   ========================================================================== */

.rh-filter .rh-filter__button::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height:
        var(--rh-filter-line-width);

    background:
        var(--rh-filter-line-color);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform
        var(--rh-filter-transition);

    pointer-events: none;

}


/* Aktiver Filter */

.rh-filter
.rh-filter__button.is-active::after {

    transform:
        scaleX(1);

}


/* ==========================================================================
   HOVER / FOCUS

   Keine Farb- oder Hintergrundänderung.
   Nur die Unterlinie bewegt sich.
   ========================================================================== */

.rh-filter .rh-filter__button:hover,
.rh-filter .rh-filter__button:focus,
.rh-filter .rh-filter__button:active {

    border: 0 !important;

    color: inherit !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

}


@media (hover: hover) {

    .rh-filter
    .rh-filter__button:hover::after {

        transform:
            scaleX(1);

    }

}


/* ==========================================================================
   TASTATUR-FOKUS
   ========================================================================== */

.rh-filter
.rh-filter__button:focus-visible {

    outline:
        1px solid currentColor;

    outline-offset:
        5px;

}


/* ==========================================================================
   TEXTFARBE INVERTIEREN

   TAO:
   .-color-inverted

   Unterlinie verwendet currentColor und wird deshalb automatisch ebenfalls
   weiss.
   ========================================================================== */

.-color-inverted .rh-filter,
.rh-filter.-color-inverted {

    --rh-filter-color:
        var(--ty-color-inverted, #ffffff);

}


/* ==========================================================================
   TABLET / SMARTPHONE

   Auf kleineren Geräten keine künstliche Komprimierung.
   Die Navigation bleibt einzeilig horizontal scrollbar.
   ========================================================================== */

@media screen and (max-width: 900px) {

    .rh-filter {

        justify-content: flex-start;

        gap: 28px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-bottom: 24px;

        padding:
            0 0 4px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .rh-filter::-webkit-scrollbar {

        display: none;

    }

}


/* ==========================================================================
   REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .rh-filter
    .rh-filter__button::after {

        transition: none;

    }

}

/* ==========================================================================
   RH PORTFOLIO GRID
   Filtertaugliches, dynamisches Raster
   ========================================================================== */

.rh-portfolio-grid {

    --rh-portfolio-gap: 8px;

    --rh-portfolio-row-height:
        clamp(220px, 23vw, 340px);

    --rh-portfolio-title-size:
        clamp(18px, calc(14px + 0.45vw), 26px);

    --rh-portfolio-title-left: 22px;
    --rh-portfolio-title-bottom: 20px;

    --rh-portfolio-overlay:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 48%,
            rgba(0, 0, 0, 0.55) 100%
        );

    --rh-portfolio-hover-scale: 1.035;

    --rh-portfolio-reveal-distance: 24px;
    --rh-portfolio-reveal-duration: 700ms;


    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-auto-rows:
        var(--rh-portfolio-row-height);

    /*
     * Entscheidend für den Filter:
     * freie Plätze werden automatisch geschlossen.
     */

    grid-auto-flow: dense;

    gap:
        var(--rh-portfolio-gap);

}


/* ==========================================================================
   KACHELN
   ========================================================================== */

.rh-portfolio-grid__item {

    position: relative;

    display: block;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #eeeeee;

    color: #ffffff;

    text-decoration: none;

}


/*
 * Grosse Kacheln belegen zwei Zeilen.
 *
 * Durch die Reihenfolge im HTML entsteht bei sechs sichtbaren Elementen:
 *
 * ┌──────────────┬──────────────┐
 * │              │ B            │
 * │ A            ├──────────────┤
 * │              │ C            │
 * ├──────────────┼──────────────┤
 * │ D            │              │
 * ├──────────────┤ E            │
 * │ F            │              │
 * └──────────────┴──────────────┘
 */

.rh-portfolio-grid__item--tall {

    grid-row:
        span 2;

}


/* ==========================================================================
   CONTAO PICTURE
   ========================================================================== */

.rh-portfolio-grid__item picture {

    display: block;

    width: 100%;
    height: 100%;

}


/* ==========================================================================
   BILDER
   ========================================================================== */

.rh-portfolio-grid__item picture img,
.rh-portfolio-grid__item > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1);

    transition:
        transform
        700ms
        cubic-bezier(.2, .65, .25, 1);

}


/* ==========================================================================
   INDIVIDUELLE BILDPOSITIONEN

   Können pro Projekt angepasst werden.
   ========================================================================== */

.rh-portfolio-grid__item--a img {
    object-position: center center;
}

.rh-portfolio-grid__item--b img {
    object-position: center center;
}

.rh-portfolio-grid__item--c img {
    object-position: center center;
}

.rh-portfolio-grid__item--d img {
    object-position: center center;
}

.rh-portfolio-grid__item--e img {
    object-position: center center;
}

.rh-portfolio-grid__item--f img {
    object-position: center center;
}


/* ==========================================================================
   VERLAUF
   ========================================================================== */

.rh-portfolio-grid__item::after {

    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        var(--rh-portfolio-overlay);

    pointer-events: none;

    opacity: 1;

    transition:
        opacity 400ms ease;

}


/* ==========================================================================
   TITEL
   ========================================================================== */

.rh-portfolio-grid__title {

    position: absolute;

    z-index: 2;

    left:
        var(--rh-portfolio-title-left);

    bottom:
        var(--rh-portfolio-title-bottom);

    max-width:
        calc(
            100%
            - (2 * var(--rh-portfolio-title-left))
        );

    color: #ffffff;

    font-family: inherit;

    font-size:
        var(--rh-portfolio-title-size);

    font-weight: 400;

    line-height: 1.22;

    text-decoration: none;

    transform:
        translateY(0);

    transition:
        transform
        400ms
        cubic-bezier(.2, .65, .25, 1);

}


/* ==========================================================================
   HOVER
   ========================================================================== */

@media (hover: hover) {

    .rh-portfolio-grid__item:hover picture img,
    .rh-portfolio-grid__item:hover > img {

        transform:
            scale(
                var(--rh-portfolio-hover-scale)
            );

    }


    .rh-portfolio-grid__item:hover
    .rh-portfolio-grid__title {

        transform:
            translateY(-5px);

    }


    .rh-portfolio-grid__item:hover::after {

        opacity: 0.9;

    }

}


/* ==========================================================================
   TASTATUR-FOKUS
   ========================================================================== */

.rh-portfolio-grid__item:focus-visible {

    outline:
        2px solid #ffffff;

    outline-offset:
        -4px;

}


/* ==========================================================================
   FILTER

   Sehr wichtig:
   ausgefilterte Elemente müssen vollständig aus dem Grid verschwinden.
   ========================================================================== */

.rh-filter-item[hidden] {

    display: none !important;

}


/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item {

    opacity: 0;

    transform:
        translateY(
            var(--rh-portfolio-reveal-distance)
        );

    transition:
        opacity
        var(--rh-portfolio-reveal-duration)
        ease,

        transform
        var(--rh-portfolio-reveal-duration)
        cubic-bezier(.2, .65, .25, 1);

}


.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(1) {
    transition-delay: 0ms;
}

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(2) {
    transition-delay: 60ms;
}

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(3) {
    transition-delay: 120ms;
}

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(4) {
    transition-delay: 0ms;
}

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(5) {
    transition-delay: 60ms;
}

.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item:nth-child(6) {
    transition-delay: 120ms;
}


.rh-portfolio-grid.is-reveal-ready
.rh-portfolio-grid__item.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media screen and (max-width: 900px) {

    .rh-portfolio-grid {

        --rh-portfolio-gap: 6px;

        --rh-portfolio-row-height:
            clamp(190px, 35vw, 290px);

        --rh-portfolio-title-left: 18px;
        --rh-portfolio-title-bottom: 16px;

    }

}


/* ==========================================================================
   SMARTPHONE
   ========================================================================== */

@media screen and (max-width: 599px) {

    .rh-portfolio-grid {

        --rh-portfolio-gap: 8px;

        --rh-portfolio-title-left: 16px;
        --rh-portfolio-title-bottom: 14px;

        grid-template-columns: 1fr;

        grid-auto-rows: auto;

    }


    .rh-portfolio-grid__item,
    .rh-portfolio-grid__item--tall {

        grid-row: auto;

        aspect-ratio: 4 / 3;

    }


    /*
     * Die grossen Portfolio-Bilder bleiben auf Mobil
     * etwas höher.
     */

    .rh-portfolio-grid__item--tall {

        aspect-ratio: 4 / 5;

    }

}


/* ==========================================================================
   REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .rh-portfolio-grid__item,
    .rh-portfolio-grid__item picture img,
    .rh-portfolio-grid__item > img,
    .rh-portfolio-grid__title,
    .rh-portfolio-grid__item::after {

        transition: none !important;

    }


    .rh-portfolio-grid.is-reveal-ready
    .rh-portfolio-grid__item {

        opacity: 1;

        transform: none;

    }

}
/* ==========================================================================
   ENDE
   ========================================================================== */





















/* ==================================================
   ROCKSOLID TAO
   Zentrierte Feature-Boxen ohne Breitenbeschränkung
   ================================================== */

/* Alle zentrierten Feature-Boxen */

.feature-box.-image-centered > .feature-box-text {
    margin-left: 0;
    margin-right: 0;
}

/* Vertikal und horizontal zentrierte Feature-Boxen */

.feature-box.-vertical-centered.-image-centered
> .feature-box-text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Feature-Boxen ohne Bild */

.feature-box.-vertical-centered.-no-image
> .feature-box-text {
    width: 100%;
}
/* ENDE zentrierten Feature-Boxen */


/* ==================================================
   ROCKSOLID TAO
   Highlite-Box Klasse higru
   ================================================== */


.higru.highlight-box {
	border: 0px solid #b2b9c4;
	background-color: #92f6ed;
	border-radius: 10px;
}

.higru.highlight-box p {
	color: #284258;
	
}
.higru {
--rh-btn-border: #284258;
    --rh-btn-bg: #284258;
    --rh-btn-text: #ffffff;
    --rh-btn-radius: 999px;

    --rh-btn-hover-border: #d33b32;
    --rh-btn-hover-bg: #d33b32;
    --rh-btn-hover-text: #ffffff;
}

.centered-wrapper.-background-color-1 {
	background: linear-gradient(-45deg, #C3E7E5, #F8F4D4, #cae4ff, #C3E7E5, #F8F4D4);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/* ----animated gardients---- */
.bg-gardient .centered-wrapper {
	background: linear-gradient(-45deg, #C3E7E5, #F8F4D4, #cae4ff, #C3E7E5, #F8F4D4);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/* ----CD---- */
.cd-bg-gardient .centered-wrapper {
	background: linear-gradient(-45deg, #d1c3e7, #d4f8dd, #c3d1e7, #C3E7E5, #d1c3e7);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/* ----WD---- */
.wd-bg-gardient .centered-wrapper {
	background: linear-gradient(-45deg, #ddd2fa, #d4f8dd, #ddd2fa, #C3E7E5, #ddd2fa);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/* ----PD---- */
.pd-bg-gardient .centered-wrapper {
	background: linear-gradient(-45deg, #eae0ce, #f5f8e0, #faebc7, #f5f8e0, #f6e1d1);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/* ----GD---- */
.gd-bg-gardient .centered-wrapper {
	background: linear-gradient(-45deg, #d5d396, #efedc5, #d5d396, #efedc5, #d5d396);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: auto;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

.blend .centered-wrapper { 
background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}



.tracking-in-expand .feature-box-text h2 {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}




/* =============================================================================
 * RH EVENTS
 *
 * event_teaser_rh.html.twig
 *   .rh-event1 = Text links, Bild rechts
 *   .rh-event2 = Bild links, Text rechts
 *
 * event_teaser_slim_rh.html.twig
 *   .rh-event-slim = Titel + Meta, Hover mit Bild + Titel + Teaser + Button
 * ========================================================================== */

:root {
    --rh-event-column-gap: 60px;
    --rh-event-row-gap: 30px;
    --rh-event-padding-y: 50px;
    --rh-event-line-color: #b2b9c4;
    --rh-event-date-gap: 16px;
    --rh-event-title-gap: 14px;
    --rh-event-button-gap: 28px;

    --rh-event-slim-padding-y: 40px;
    --rh-event-slim-min-height: 170px;
    --rh-event-slim-image-size: 128px;
    --rh-event-slim-gap: 42px;
}

/* =============================================================================
 * EVENT 1 / EVENT 2
 * ========================================================================== */

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--rh-event-column-gap);
    align-items: start;
    margin: 0;
    padding: var(--rh-event-padding-y) 0;
    border-top: 1px solid var(--rh-event-line-color);
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2):last-child {
    border-bottom: 1px solid var(--rh-event-line-color);
}

.main-content .mod_eventlist .rh-event1 > .rh-event-text { grid-column: 1; }
.main-content .mod_eventlist .rh-event1 > .rh-event-image { grid-column: 2; }
.main-content .mod_eventlist .rh-event2 > .rh-event-text { grid-column: 2; }
.main-content .mod_eventlist .rh-event2 > .rh-event-image { grid-column: 1; grid-row: 1; }

.main-content .mod_eventlist .event.rh-event-no-image:is(.rh-event1, .rh-event2) {
    grid-template-columns: 1fr;
}

.main-content .mod_eventlist .event.rh-event-no-image:is(.rh-event1, .rh-event2) > .rh-event-text {
    grid-column: 1;
}

/* Typografie */
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-text {
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .time {
    margin: 0 0 var(--rh-event-date-gap);
    font: inherit;
    font-weight: var(--ty-weight-medium);
    color: inherit;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) h2 {
    margin: 0 0 var(--rh-event-title-gap);
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) h2 a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) h2 a:hover,
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) h2 a:focus {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .location {
    margin: 0 0 var(--rh-event-title-gap);
    color: inherit;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-teaser > :first-child { margin-top: 0; }
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-teaser > :last-child { margin-bottom: 0; }

/* Bild */
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-image,
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-image figure {
    margin: 0;
    padding: 0;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-image figure {
    float: none;
    width: 100%;
    max-width: none;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-image picture,
.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .rh-event-image img {
    display: block;
    width: 100%;
    height: auto;
}

.main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) .more {
    margin: var(--rh-event-button-gap) 0 0;
}


/* Normaler Weiterlesen-Link
 * Wird verwendet, wenn am Event keine Klasse rh-news-btn1 bis rh-news-btn4
 * gesetzt ist. Gestaltung analog zur Link-Variante der Newsboxen.
 */
.main-content .mod_eventlist .event .more .rh-event-link {
    display: inline-block;
    padding-bottom: 0.15em;
    border-bottom: 1px solid currentColor;
    color: var(--ty-color-text);
    text-decoration: none;
}

.main-content .mod_eventlist .event .more .rh-event-link:hover,
.main-content .mod_eventlist .event .more .rh-event-link:focus-visible {
    color: var(--ty-color-text);
    text-decoration: none;
}

/* =============================================================================
 * EVENT SLIM
 * ========================================================================== */

.main-content .mod_eventlist .event.rh-event-slim {
    position: relative;
    display: grid;
    align-items: center;
    min-height: var(--rh-event-slim-min-height);
    margin: 0;
    padding: var(--rh-event-slim-padding-y) 24px;
    border-bottom: 1px solid var(--rh-event-line-color);
    box-sizing: border-box;
    background: transparent;
}

.main-content .mod_eventlist .event.rh-event-slim:first-child {
    border-top: 1px solid var(--rh-event-line-color);
}

/* Beide Zustände liegen übereinander. So kann weich überblendet werden. */
.main-content .mod_eventlist .rh-event-slim-default,
.main-content .mod_eventlist .rh-event-slim-hover {
    grid-area: 1 / 1;
    width: 100%;
    transition: opacity .45s ease, transform .45s ease;
}

/* Standard: Titel, darunter Meta */
.main-content .mod_eventlist .rh-event-slim-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
    opacity: 1;
    transform: translateY(0);
}

.main-content .mod_eventlist .rh-event-slim-default h2 {
    margin: 0 0 12px;
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_eventlist .rh-event-slim-default h2 a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .rh-event-slim-default h2 a:hover,
.main-content .mod_eventlist .rh-event-slim-default h2 a:focus {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .rh-event-slim-default .rh-event-meta {
    margin: 0;
    font: inherit;
    font-weight: var(--ty-weight-regular);
    color: var(--ty-color-text);
}

/* Hover-/Tap-Inhalt */
.main-content .mod_eventlist .rh-event-slim-hover {
    display: grid;
    grid-template-columns: var(--rh-event-slim-image-size) minmax(0, 1fr) auto;
    column-gap: var(--rh-event-slim-gap);
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    background: transparent;
}

.main-content .mod_eventlist .event.rh-event-no-image.rh-event-slim > .rh-event-slim-hover {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Maus-Hover sowie Touch-/Fokus-Fallback. */
.main-content .mod_eventlist .event.rh-event-slim:hover > .rh-event-slim-default,
.main-content .mod_eventlist .event.rh-event-slim:focus > .rh-event-slim-default,
.main-content .mod_eventlist .event.rh-event-slim:has(> .rh-event-slim-hover :focus) > .rh-event-slim-default {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.main-content .mod_eventlist .event.rh-event-slim:hover > .rh-event-slim-hover,
.main-content .mod_eventlist .event.rh-event-slim:focus > .rh-event-slim-hover,
.main-content .mod_eventlist .event.rh-event-slim:has(> .rh-event-slim-hover :focus) > .rh-event-slim-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.main-content .mod_eventlist .event.rh-event-slim:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

/* Rundes Bild */
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image {
    width: var(--rh-event-slim-image-size);
    min-width: var(--rh-event-slim-image-size);
    height: var(--rh-event-slim-image-size);
    min-height: var(--rh-event-slim-image-size);
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 0;
    align-self: center;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image figure,
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image figure > a,
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image picture {
    display: block;
    float: none;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    padding: 0;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-image figcaption {
    display: none;
}

/* Hover-Inhalt: Titel + Teaser */
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-content {
    min-width: 0;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-title {
    margin: 0 0 8px;
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-title a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-title a:hover,
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-title a:focus {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-teaser {
    min-width: 0;
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
}

.main-content .mod_eventlist .rh-event-slim-hover .rh-event-teaser > :first-child { margin-top: 0; }
.main-content .mod_eventlist .rh-event-slim-hover .rh-event-teaser > :last-child { margin-bottom: 0; }

.main-content .mod_eventlist .rh-event-slim-hover .more {
    justify-self: end;
    margin: 0;
}

/* Tablet / Smartphone */
@media screen and (max-width: 900px) {
    .main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) {
        grid-template-columns: 1fr;
        row-gap: var(--rh-event-row-gap);
        padding-top: 40px;
        padding-bottom: 40px;
        border-top: 0;
        border-bottom: 0;
    }

    .main-content .mod_eventlist .event:is(.rh-event1, .rh-event2):last-child {
        border-bottom: 1px solid var(--rh-event-line-color);
    }

    .main-content .mod_eventlist .rh-event1 > .rh-event-image,
    .main-content .mod_eventlist .rh-event2 > .rh-event-image {
        grid-column: 1;
        grid-row: 1;
    }

    .main-content .mod_eventlist .rh-event1 > .rh-event-text,
    .main-content .mod_eventlist .rh-event2 > .rh-event-text {
        grid-column: 1;
        grid-row: 2;
    }

    /* Mobile/Tablet: Der ausgeblendete Hover-Inhalt darf die Höhe des
       Normalzustands nicht mitbestimmen. Deshalb werden die beiden
       Zustände hier nacheinander statt übereinander dargestellt. */
    .main-content .mod_eventlist .event.rh-event-slim {
        --rh-event-slim-image-size: 96px;
        display: block;
        min-height: 0;
        padding: 18px 0;
    }

    .main-content .mod_eventlist .rh-event-slim-default {
        display: flex;
        min-height: 0;
    }

    .main-content .mod_eventlist .rh-event-slim-hover {
        display: none;
        grid-template-columns: 1fr;
        row-gap: 8px;
        justify-items: center;
        text-align: center;
        opacity: 1;
        transform: none;
    }

    .main-content .mod_eventlist .event.rh-event-slim:hover > .rh-event-slim-default,
    .main-content .mod_eventlist .event.rh-event-slim:focus > .rh-event-slim-default,
    .main-content .mod_eventlist .event.rh-event-slim:has(> .rh-event-slim-hover :focus) > .rh-event-slim-default {
        display: none;
    }

    .main-content .mod_eventlist .event.rh-event-slim:hover > .rh-event-slim-hover,
    .main-content .mod_eventlist .event.rh-event-slim:focus > .rh-event-slim-hover,
    .main-content .mod_eventlist .event.rh-event-slim:has(> .rh-event-slim-hover :focus) > .rh-event-slim-hover {
        display: grid;
        animation: rh-event-slim-mobile-in .35s ease both;
    }

    .main-content .mod_eventlist .event.rh-event-no-image.rh-event-slim > .rh-event-slim-hover {
        grid-template-columns: 1fr;
    }

    .main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-content {
        width: 100%;
        max-width: 680px;
        text-align: center;
    }

    .main-content .mod_eventlist .rh-event-slim-hover .rh-event-hover-title {
        margin-bottom: 4px;
        text-align: center;
    }

    .main-content .mod_eventlist .rh-event-slim-hover .rh-event-teaser {
        text-align: center;
    }

    .main-content .mod_eventlist .rh-event-slim-hover .more {
        justify-self: center;
        margin-top: 2px;
    }
}

@media screen and (max-width: 599px) {
    .main-content .mod_eventlist .event:is(.rh-event1, .rh-event2) {
        row-gap: 24px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .main-content .mod_eventlist .event.rh-event-slim {
        --rh-event-slim-image-size: 88px;
        padding: 16px 0;
    }

    .main-content .mod_eventlist .rh-event-slim-default h2 {
        margin-bottom: 8px;
    }

    .main-content .mod_eventlist .rh-event-slim-hover {
        row-gap: 7px;
    }
}

@keyframes rh-event-slim-mobile-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .main-content .mod_eventlist .rh-event-slim-default,
    .main-content .mod_eventlist .rh-event-slim-hover {
        transition: none;
        animation: none;
    }
}



/* =============================================================================
 * RH NEWS LIST BOX
 *
 * Verwendung am Nachrichtenlisten-Modul:
 *   rh-news-list-box
 *
 *   RockSolid-Slider:
 *   rh-slider-nav rh-news-list-box
 *
 * Diese Datei gestaltet ausschliesslich die Newsboxen und deren Inhalte.
 * Sie verändert NICHT das Layout des Nachrichtenlisten-Moduls und berührt
 * insbesondere die Modulüberschrift nicht.
 *
 * Buttonvarianten am einzelnen Nachrichtenbeitrag über CSS-Klasse:
 *   keine Klasse     = Link
 *   rh-news-btn1     = Button 1
 *   rh-news-btn2     = Button 2
 *   rh-news-btn3     = Button 3
 *   rh-news-btn4     = Button 4
 * ========================================================================== */

/* ZENTRALE EINSTELLUNGEN */
.rh-news-list-box {
    --rh-news-box-bg: #ffffff;
    --rh-news-box-radius: 0px;

    --rh-news-box-border-width: 1px;
    --rh-news-box-border-color: #b2b9c4;

    --rh-news-box-line-width: 1px;
    --rh-news-box-line-color: #e5e8ee;

    --rh-news-box-title-size: var(--ty-h3);
    --rh-news-box-title-weight: var(--ty-h3-weight);
    --rh-news-box-title-color: var(--ty-color-heading);

    --rh-news-box-meta-size: 0.9em;
    --rh-news-box-meta-color: var(--ty-color-text);

    --rh-news-box-text-size: 1em;
    --rh-news-box-text-color: var(--ty-color-text);

    --rh-news-box-padding: 28px;
    --rh-news-box-gap: 40px;

    --rh-news-box-image-radius: 0px;
}

/* Box */
.rh-news-list-box .rh-news-list-box__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    margin: 0;

    border:
        var(--rh-news-box-border-width)
        solid
        var(--rh-news-box-border-color);

    border-radius: var(--rh-news-box-radius);

    background: var(--rh-news-box-bg);
    color: var(--rh-news-box-text-color);
}

/* Bild */
.rh-news-list-box .rh-news-list-box__image {
    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius:
        var(--rh-news-box-image-radius)
        var(--rh-news-box-image-radius)
        0
        0;
}

.rh-news-list-box .rh-news-list-box__image figure,
.rh-news-list-box .rh-news-list-box__image picture {
    display: block;
    margin: 0;
    padding: 0;
}

.rh-news-list-box .rh-news-list-box__image a {
    display: block;
}

.rh-news-list-box .rh-news-list-box__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Inhalt */
.rh-news-list-box .rh-news-list-box__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;

    padding: var(--rh-news-box-padding);
}

/* Titel */
.rh-news-list-box .rh-news-list-box__title {
    margin: 0 0 0.65em;

    color: var(--rh-news-box-title-color);

    font-size: var(--rh-news-box-title-size);
    font-weight: var(--rh-news-box-title-weight);
    line-height: 1.25;
}

.rh-news-list-box .rh-news-list-box__title a {
    color: inherit;
    text-decoration: none;
}

.rh-news-list-box .rh-news-list-box__title a:hover,
.rh-news-list-box .rh-news-list-box__title a:focus-visible {
    color: inherit;
}

/* Metadaten */
.rh-news-list-box .rh-news-list-box__meta {
    margin: 0 0 1.25em;
    padding: 0 0 0.8em;

    border-bottom:
        var(--rh-news-box-line-width)
        solid
        var(--rh-news-box-line-color);

    color: var(--rh-news-box-meta-color);

    font-size: var(--rh-news-box-meta-size);
    line-height: 1.45;
}

/* Teasertext */
.rh-news-list-box .rh-news-list-box__teaser {
    color: var(--rh-news-box-text-color);

    font-size: var(--rh-news-box-text-size);
    line-height: inherit;
}

.rh-news-list-box .rh-news-list-box__teaser > :first-child {
    margin-top: 0;
}

.rh-news-list-box .rh-news-list-box__teaser > :last-child {
    margin-bottom: 0;
}

/* Weiterlesen */
.rh-news-list-box .more {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 1.5em;
}

/* Link-Variante */
.rh-news-list-box .rh-news-list-box__item:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4) .more a {
    color: var(--ty-color-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.rh-news-list-box .rh-news-list-box__item:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4) .more a:hover,
.rh-news-list-box .rh-news-list-box__item:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4) .more a:focus-visible {
    text-decoration: none;
}

/* Buttonvarianten */
.rh-news-list-box .rh-news-btn1 {
    --rh-news-btn-border: var(--rh-btn-border);
    --rh-news-btn-bg: var(--rh-btn-bg);
    --rh-news-btn-text: var(--rh-btn-text);
    --rh-news-btn-radius: var(--rh-btn-radius);

    --rh-news-btn-hover-border: var(--rh-btn-hover-border);
    --rh-news-btn-hover-bg: var(--rh-btn-hover-bg);
    --rh-news-btn-hover-text: var(--rh-btn-hover-text);
}

.rh-news-list-box .rh-news-btn2 {
    --rh-news-btn-border: var(--rh-b2-border);
    --rh-news-btn-bg: var(--rh-b2-bg);
    --rh-news-btn-text: var(--rh-b2-text);
    --rh-news-btn-radius: var(--rh-b2-radius);

    --rh-news-btn-hover-border: var(--rh-b2-hover-border);
    --rh-news-btn-hover-bg: var(--rh-b2-hover-bg);
    --rh-news-btn-hover-text: var(--rh-b2-hover-text);
}

.rh-news-list-box .rh-news-btn3 {
    --rh-news-btn-border: var(--rh-b3-border);
    --rh-news-btn-bg: var(--rh-b3-bg);
    --rh-news-btn-text: var(--rh-b3-text);
    --rh-news-btn-radius: var(--rh-b3-radius);

    --rh-news-btn-hover-border: var(--rh-b3-hover-border);
    --rh-news-btn-hover-bg: var(--rh-b3-hover-bg);
    --rh-news-btn-hover-text: var(--rh-b3-hover-text);
}

.rh-news-list-box .rh-news-btn4 {
    --rh-news-btn-border: var(--rh-b4-border);
    --rh-news-btn-bg: var(--rh-b4-bg);
    --rh-news-btn-text: var(--rh-b4-text);
    --rh-news-btn-radius: var(--rh-b4-radius);

    --rh-news-btn-hover-border: var(--rh-b4-hover-border);
    --rh-news-btn-hover-bg: var(--rh-b4-hover-bg);
    --rh-news-btn-hover-text: var(--rh-b4-hover-text);
}

.rh-news-list-box
:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a {
    -webkit-appearance: none;
    appearance: none;

    display: inline-block;

    padding: var(--rh-btn-pad-y) var(--rh-btn-pad-x);

    border-width: var(--rh-btn-border-width);
    border-style: solid;
    border-color: var(--rh-news-btn-border);
    border-radius: var(--rh-news-btn-radius);

    background: var(--rh-news-btn-bg);
    color: var(--rh-news-btn-text);

    font-family: var(--rh-btn-font);
    font-size: var(--rh-btn-size);
    font-weight: var(--rh-btn-weight);
    line-height: 1.25;

    text-align: center;
    text-decoration: none;

    transition:
        color var(--rh-btn-speed) ease,
        background-color var(--rh-btn-speed) ease,
        border-color var(--rh-btn-speed) ease;
}

.rh-news-list-box
:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a:hover,
.rh-news-list-box
:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a:focus-visible {
    border-color: var(--rh-news-btn-hover-border);

    background: var(--rh-news-btn-hover-bg);
    color: var(--rh-news-btn-hover-text);

    text-decoration: none;
}



/* =============================================================================
 * RH NEWS LIST BOX – RESPONSIVES GRID
 *
 * Der Wrapper .rh-news-grid wird durch
 * mod_newslist_rh_grid.html.twig erzeugt.
 *
 * Modulüberschrift und Pagination liegen ausserhalb dieses Grids.
 * ========================================================================== */

.mod_newslist.rh-news-list-box .rh-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rh-news-box-gap);
    align-items: stretch;
}

.mod_newslist.rh-news-list-box
.rh-news-grid > .rh-news-list-box__item {
    height: 100%;
}

/* Tablet */
@media screen and (max-width: 900px) {
    .mod_newslist.rh-news-list-box .rh-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
}

/* Smartphone */
@media screen and (max-width: 599px) {
    .mod_newslist.rh-news-list-box .rh-news-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* RockSolid-Slider */
.mod_rocksolid_slider.rh-news-list-box .rh-news-list-box__item {
    height: 100%;
}

/* Tablet */
@media screen and (max-width: 900px) {
    .rh-news-list-box {
        --rh-news-box-padding: 22px;
    }
}

/* Smartphone */
@media screen and (max-width: 599px) {
    .rh-news-list-box {
        --rh-news-box-padding: 18px;
    }
}












/* =============================================================================
 * RH SLIDER + NEWS NAVIGATION – FINAL
 *
 * Enthält:
 * 1. RockSolid Slider Navigation
 *    - Punkte als Linien
 *    - Nummeriert
 *    - Tabs und Thumbnails bleiben unangetastet
 *
 * 2. RockSolid Slider Equal-Height für rh-news-list-box
 *
 * 3. Contao News-Paginierung passend zu RockSolid "Nummeriert"
 *
 * Verwendung am RockSolid-Slider:
 * rh-slider-nav rh-news-list-box
 *
 * Verwendung an der normalen Nachrichtenliste:
 * rh-news-list-box
 *
 * Voraussetzung Equal-Height:
 * RockSolid Slider > Höhe = normalize
 *
 * Keine Änderungen an TAO main.css oder RockSolid-Core-Dateien.
 * ========================================================================== */

.rh-slider-nav {
    --rh-slider-nav-gap: 12px;
    --rh-slider-nav-distance: 20px;
    --rh-slider-nav-transition: .25s ease;

    --rh-slider-line-width: 58px;
    --rh-slider-line-height: 4px;
    --rh-slider-line-radius: 0px;
    --rh-slider-line-bg: #b2b9c4;
    --rh-slider-line-hover-bg: #7f8b98;
    --rh-slider-line-active-bg: #2457e6;

    --rh-slider-number-size: 40px;
    --rh-slider-number-radius: 6px;
    --rh-slider-number-border-width: 1px;
    --rh-slider-number-border-color: #b2b9c4;
    --rh-slider-number-border-hover-color: #284258;
    --rh-slider-number-border-active-color: #2457e6;

    --rh-slider-number-bg: #ffffff;
    --rh-slider-number-hover-bg: #f1f3f5;
    --rh-slider-number-active-bg: #2457e6;

    --rh-slider-number-color: #284258;
    --rh-slider-number-hover-color: #284258;
    --rh-slider-number-active-color: #ffffff;

    --rh-slider-number-font-size: 15px;
    --rh-slider-number-font-weight: 500;

    --rh-slider-arrow-color: #284258;
    --rh-slider-arrow-hover-color: #2457e6;
    --rh-slider-arrow-size: 8px;
    --rh-slider-arrow-line: 2px;
}

.rh-slider-nav .rsts-nav-bullets {
    margin-top: var(--rh-slider-nav-distance);
}

.rh-slider-nav .rsts-nav-bullets ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rh-slider-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-slider-nav .rsts-nav-bullets li.rsts-nav-prev,
.rh-slider-nav .rsts-nav-bullets li.rsts-nav-next {
    display: none !important;
}

.rh-slider-nav .rsts-nav-bullets li.rsts-nav-item {
    margin: 0;
    padding: 0;
}

.rh-slider-nav .rsts-nav-bullets li.rsts-nav-item > a {
    display: block;
    width: var(--rh-slider-line-width);
    height: var(--rh-slider-line-height);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: var(--rh-slider-line-radius);
    background: var(--rh-slider-line-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition: background-color var(--rh-slider-nav-transition);
}

.rh-slider-nav .rsts-nav-bullets li.rsts-nav-item > a:hover,
.rh-slider-nav .rsts-nav-bullets li.rsts-nav-item > a:focus-visible {
    background: var(--rh-slider-line-hover-bg) !important;
}

.rh-slider-nav .rsts-nav-bullets li.rsts-nav-item > a.active {
    background: var(--rh-slider-line-active-bg) !important;
}

.rh-slider-nav .rsts-nav-numbers {
    margin-top: var(--rh-slider-nav-distance);
}

.rh-slider-nav .rsts-nav-numbers ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rh-slider-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-slider-nav .rsts-nav-numbers li {
    margin: 0;
    padding: 0;
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rh-slider-number-size);
    height: var(--rh-slider-number-size);
    min-width: var(--rh-slider-number-size);
    min-height: var(--rh-slider-number-size);
    margin: 0;
    padding: 0;
    border: var(--rh-slider-number-border-width) solid var(--rh-slider-number-border-color) !important;
    border-radius: var(--rh-slider-number-radius) !important;
    background: var(--rh-slider-number-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: var(--rh-slider-number-color) !important;
    font-size: var(--rh-slider-number-font-size) !important;
    font-weight: var(--rh-slider-number-font-weight);
    line-height: 1 !important;
    text-align: center;
    text-indent: 0 !important;
    text-decoration: none;
    transition:
        color var(--rh-slider-nav-transition),
        background-color var(--rh-slider-nav-transition),
        border-color var(--rh-slider-nav-transition);
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-item > a:hover,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-item > a:focus-visible {
    border-color: var(--rh-slider-number-border-hover-color) !important;
    background: var(--rh-slider-number-hover-bg) !important;
    color: var(--rh-slider-number-hover-color) !important;
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-item > a.active {
    border-color: var(--rh-slider-number-border-active-color) !important;
    background: var(--rh-slider-number-active-bg) !important;
    color: var(--rh-slider-number-active-color) !important;
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-prev > a,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-next > a {
    position: relative;
    display: block;
    width: var(--rh-slider-number-size);
    height: var(--rh-slider-number-size);
    min-width: var(--rh-slider-number-size);
    min-height: var(--rh-slider-number-size);
    margin: 0;
    padding: 0;
    border: var(--rh-slider-number-border-width) solid var(--rh-slider-number-border-color) !important;
    border-radius: var(--rh-slider-number-radius) !important;
    background: var(--rh-slider-number-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: var(--rh-slider-arrow-color) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition:
        color var(--rh-slider-nav-transition),
        background-color var(--rh-slider-nav-transition),
        border-color var(--rh-slider-nav-transition);
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-prev > a:hover,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-prev > a:focus-visible,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-next > a:hover,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-next > a:focus-visible {
    border-color: var(--rh-slider-number-border-hover-color) !important;
    background: var(--rh-slider-number-hover-bg) !important;
    color: var(--rh-slider-arrow-hover-color) !important;
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-prev > a::before,
.rh-slider-nav .rsts-nav-numbers li.rsts-nav-next > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--rh-slider-arrow-size);
    height: var(--rh-slider-arrow-size);
    border-top: var(--rh-slider-arrow-line) solid currentColor;
    border-left: var(--rh-slider-arrow-line) solid currentColor;
    background: transparent !important;
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-prev > a::before {
    transform: translate(-35%, -50%) rotate(-45deg);
}

.rh-slider-nav .rsts-nav-numbers li.rsts-nav-next > a::before {
    transform: translate(-65%, -50%) rotate(135deg);
}

/* Equal-Height */
.mod_rocksolid_slider.rh-news-list-box .rsts-slide {
    display: flex;
    align-items: stretch;
}

.mod_rocksolid_slider.rh-news-list-box .rsts-slide > div {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.mod_rocksolid_slider.rh-news-list-box
.rsts-slide > div > .rh-news-list-box__item {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

/* News-Paginierung */
.mod_newslist.rh-news-list-box {
    --rh-news-page-distance: 20px;
    --rh-news-page-size: 40px;
    --rh-news-page-gap: 12px;
    --rh-news-page-radius: 6px;

    --rh-news-page-border-width: 1px;
    --rh-news-page-border-color: #b2b9c4;
    --rh-news-page-border-hover-color: #284258;
    --rh-news-page-border-active-color: #2457e6;

    --rh-news-page-bg: #ffffff;
    --rh-news-page-hover-bg: #f1f3f5;
    --rh-news-page-active-bg: #2457e6;

    --rh-news-page-color: #284258;
    --rh-news-page-hover-color: #284258;
    --rh-news-page-active-color: #ffffff;

    --rh-news-page-font-size: 15px;
    --rh-news-page-font-weight: 500;

    --rh-news-page-arrow-size: 8px;
    --rh-news-page-arrow-line: 2px;
}

.mod_newslist.rh-news-list-box .pagination {
    clear: both;
    width: 100%;
    min-width: 0;
    margin-top: var(--rh-news-page-distance);
    text-align: center;
}

.mod_newslist.rh-news-list-box .pagination > p {
    display: none;
}

.mod_newslist.rh-news-list-box .pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rh-news-page-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod_newslist.rh-news-list-box .pagination li {
    display: block;
    margin: 0;
    padding: 0;
}

.mod_newslist.rh-news-list-box .pagination a,
.mod_newslist.rh-news-list-box .pagination strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rh-news-page-size);
    height: var(--rh-news-page-size);
    min-width: var(--rh-news-page-size);
    margin: 0;
    padding: 0;
    border: var(--rh-news-page-border-width) solid var(--rh-news-page-border-color);
    border-radius: var(--rh-news-page-radius);
    background: var(--rh-news-page-bg);
    box-shadow: none;
    text-shadow: none;
    color: var(--rh-news-page-color);
    font-size: var(--rh-news-page-font-size);
    font-weight: var(--rh-news-page-font-weight);
    line-height: 1;
    text-decoration: none;
    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease;
}

.mod_newslist.rh-news-list-box .pagination a:hover,
.mod_newslist.rh-news-list-box .pagination a:focus-visible {
    border-color: var(--rh-news-page-border-hover-color);
    background: var(--rh-news-page-hover-bg);
    color: var(--rh-news-page-hover-color);
    text-decoration: none;
}

.mod_newslist.rh-news-list-box .pagination strong.active {
    border-color: var(--rh-news-page-border-active-color);
    background: var(--rh-news-page-active-bg);
    color: var(--rh-news-page-active-color);
}

.mod_newslist.rh-news-list-box .pagination li.previous a,
.mod_newslist.rh-news-list-box .pagination li.next a {
    position: relative;
    font-size: 0;
    overflow: hidden;
}

.mod_newslist.rh-news-list-box .pagination li.previous a::before,
.mod_newslist.rh-news-list-box .pagination li.next a::before {
    content: "";
    display: block;
    width: var(--rh-news-page-arrow-size);
    height: var(--rh-news-page-arrow-size);
    border-top: var(--rh-news-page-arrow-line) solid currentColor;
    border-left: var(--rh-news-page-arrow-line) solid currentColor;
}

.mod_newslist.rh-news-list-box .pagination li.previous a::before {
    transform: rotate(-45deg);
}

.mod_newslist.rh-news-list-box .pagination li.next a::before {
    transform: rotate(135deg);
}

@media screen and (max-width: 599px) {
    .rh-slider-nav {
        --rh-slider-nav-gap: 8px;
        --rh-slider-line-width: 42px;
        --rh-slider-line-height: 4px;
        --rh-slider-number-size: 36px;
        --rh-slider-number-font-size: 14px;
        --rh-slider-arrow-size: 7px;
    }

    .mod_newslist.rh-news-list-box {
        --rh-news-page-size: 36px;
        --rh-news-page-gap: 8px;
        --rh-news-page-font-size: 14px;
        --rh-news-page-arrow-size: 7px;
    }
}











/* =============================================================================
 * RH NEWS TEASER
 *
 * news_latest_rh.html.twig
 *   .rh-news1 = Text links, Bild rechts
 *   .rh-news2 = Bild links, Text rechts
 *
 * news_latest_slim_rh.html.twig
 *   .rh-news-slim = Titel + Meta, Hover mit Bild + Titel + Teaser + Link/Button
 * ========================================================================== */

:root {
    --rh-news-column-gap: 60px;
    --rh-news-row-gap: 30px;
    --rh-news-padding-y: 50px;
    --rh-news-line-color: #b2b9c4;
    --rh-news-meta-gap: 16px;
    --rh-news-title-gap: 14px;
    --rh-news-button-gap: 28px;

    --rh-news-slim-padding-y: 40px;
    --rh-news-slim-min-height: 170px;
    --rh-news-slim-image-size: 128px;
    --rh-news-slim-gap: 42px;
}

/* =============================================================================
 * NEWS 1 / NEWS 2
 * ========================================================================== */

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--rh-news-column-gap);
    align-items: start;
    margin: 0;
    padding: var(--rh-news-padding-y) 0;
    border-top: 1px solid var(--rh-news-line-color);
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2):last-child {
    border-bottom: 1px solid var(--rh-news-line-color);
}

.main-content .mod_newslist .rh-news1 > .rh-news-text { grid-column: 1; }
.main-content .mod_newslist .rh-news1 > .rh-news-image { grid-column: 2; }
.main-content .mod_newslist .rh-news2 > .rh-news-text { grid-column: 2; }
.main-content .mod_newslist .rh-news2 > .rh-news-image { grid-column: 1; grid-row: 1; }

.main-content .mod_newslist .rh-news-teaser.rh-news-no-image:is(.rh-news1, .rh-news2) {
    grid-template-columns: 1fr;
}

.main-content .mod_newslist .rh-news-teaser.rh-news-no-image:is(.rh-news1, .rh-news2) > .rh-news-text {
    grid-column: 1;
}

/* Typografie */
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-text {
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-meta {
    margin: 0 0 var(--rh-news-meta-gap);
    font: inherit;
    font-weight: var(--ty-weight-medium);
    color: inherit;
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) h2 {
    margin: 0 0 var(--rh-news-title-gap);
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) h2 a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) h2 a:hover,
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) h2 a:focus {
    color: inherit;
    text-decoration: none;
}


.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-teaser-text > :first-child { margin-top: 0; }
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-teaser-text > :last-child { margin-bottom: 0; }

/* Bild */
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-image,
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-image figure {
    margin: 0;
    padding: 0;
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-image figure {
    float: none;
    width: 100%;
    max-width: none;
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-image picture,
.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .rh-news-image img {
    display: block;
    width: 100%;
    height: auto;
}

.main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) .more {
    margin: var(--rh-news-button-gap) 0 0;
}


/* =============================================================================
 * NORMALER WEITERLESEN-LINK
 * ========================================================================== */

.main-content .mod_newslist
.rh-news-teaser:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4)
.more a {
    display: inline-block;
    padding-bottom: 0.15em;
    border-bottom: 1px solid currentColor;
    color: var(--ty-color-text);
    text-decoration: none;
}

.main-content .mod_newslist
.rh-news-teaser:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4)
.more a:hover,
.main-content .mod_newslist
.rh-news-teaser:not(.rh-news-btn1):not(.rh-news-btn2):not(.rh-news-btn3):not(.rh-news-btn4)
.more a:focus-visible {
    color: var(--ty-color-text);
    text-decoration: none;
}


/* =============================================================================
 * BUTTONVARIANTEN
 * Nutzt die zentralen Variablen aus rh_buttons.css.
 * ========================================================================== */

.main-content .mod_newslist .rh-news-btn1 {
    --rh-news-teaser-btn-border: var(--rh-btn-border);
    --rh-news-teaser-btn-bg: var(--rh-btn-bg);
    --rh-news-teaser-btn-text: var(--rh-btn-text);
    --rh-news-teaser-btn-radius: var(--rh-btn-radius);
    --rh-news-teaser-btn-hover-border: var(--rh-btn-hover-border);
    --rh-news-teaser-btn-hover-bg: var(--rh-btn-hover-bg);
    --rh-news-teaser-btn-hover-text: var(--rh-btn-hover-text);
}

.main-content .mod_newslist .rh-news-btn2 {
    --rh-news-teaser-btn-border: var(--rh-b2-border);
    --rh-news-teaser-btn-bg: var(--rh-b2-bg);
    --rh-news-teaser-btn-text: var(--rh-b2-text);
    --rh-news-teaser-btn-radius: var(--rh-b2-radius);
    --rh-news-teaser-btn-hover-border: var(--rh-b2-hover-border);
    --rh-news-teaser-btn-hover-bg: var(--rh-b2-hover-bg);
    --rh-news-teaser-btn-hover-text: var(--rh-b2-hover-text);
}

.main-content .mod_newslist .rh-news-btn3 {
    --rh-news-teaser-btn-border: var(--rh-b3-border);
    --rh-news-teaser-btn-bg: var(--rh-b3-bg);
    --rh-news-teaser-btn-text: var(--rh-b3-text);
    --rh-news-teaser-btn-radius: var(--rh-b3-radius);
    --rh-news-teaser-btn-hover-border: var(--rh-b3-hover-border);
    --rh-news-teaser-btn-hover-bg: var(--rh-b3-hover-bg);
    --rh-news-teaser-btn-hover-text: var(--rh-b3-hover-text);
}

.main-content .mod_newslist .rh-news-btn4 {
    --rh-news-teaser-btn-border: var(--rh-b4-border);
    --rh-news-teaser-btn-bg: var(--rh-b4-bg);
    --rh-news-teaser-btn-text: var(--rh-b4-text);
    --rh-news-teaser-btn-radius: var(--rh-b4-radius);
    --rh-news-teaser-btn-hover-border: var(--rh-b4-hover-border);
    --rh-news-teaser-btn-hover-bg: var(--rh-b4-hover-bg);
    --rh-news-teaser-btn-hover-text: var(--rh-b4-hover-text);
}

.main-content .mod_newslist
.rh-news-teaser:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    padding: var(--rh-btn-pad-y) var(--rh-btn-pad-x);
    border-width: var(--rh-btn-border-width);
    border-style: solid;
    border-color: var(--rh-news-teaser-btn-border);
    border-radius: var(--rh-news-teaser-btn-radius);
    background: var(--rh-news-teaser-btn-bg);
    color: var(--rh-news-teaser-btn-text);
    font-family: var(--rh-btn-font);
    font-size: var(--rh-btn-size);
    font-weight: var(--rh-btn-weight);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition:
        color var(--rh-btn-speed) ease,
        background-color var(--rh-btn-speed) ease,
        border-color var(--rh-btn-speed) ease;
}

.main-content .mod_newslist
.rh-news-teaser:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a:hover,
.main-content .mod_newslist
.rh-news-teaser:is(.rh-news-btn1, .rh-news-btn2, .rh-news-btn3, .rh-news-btn4)
.more a:focus-visible {
    border-color: var(--rh-news-teaser-btn-hover-border);
    background: var(--rh-news-teaser-btn-hover-bg);
    color: var(--rh-news-teaser-btn-hover-text);
    text-decoration: none;
}



/* =============================================================================
 * NEWS SLIM
 * ========================================================================== */

.main-content .mod_newslist .rh-news-teaser.rh-news-slim {
    position: relative;
    display: grid;
    align-items: center;
    min-height: var(--rh-news-slim-min-height);
    margin: 0;
    padding: var(--rh-news-slim-padding-y) 24px;
    border-bottom: 1px solid var(--rh-news-line-color);
    box-sizing: border-box;
    background: transparent;
}

.main-content .mod_newslist .rh-news-teaser.rh-news-slim:first-child {
    border-top: 1px solid var(--rh-news-line-color);
}

/* Beide Zustände liegen übereinander. So kann weich überblendet werden. */
.main-content .mod_newslist .rh-news-slim-default,
.main-content .mod_newslist .rh-news-slim-hover {
    grid-area: 1 / 1;
    width: 100%;
    transition: opacity .45s ease, transform .45s ease;
}

/* Standard: Titel, darunter Meta */
.main-content .mod_newslist .rh-news-slim-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
    opacity: 1;
    transform: translateY(0);
}

.main-content .mod_newslist .rh-news-slim-default h2 {
    margin: 0 0 12px;
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_newslist .rh-news-slim-default h2 a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_newslist .rh-news-slim-default h2 a:hover,
.main-content .mod_newslist .rh-news-slim-default h2 a:focus {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_newslist .rh-news-slim-default .rh-news-meta {
    margin: 0;
    font: inherit;
    font-weight: var(--ty-weight-regular);
    color: var(--ty-color-text);
}

/* Hover-/Tap-Inhalt */
.main-content .mod_newslist .rh-news-slim-hover {
    display: grid;
    grid-template-columns: var(--rh-news-slim-image-size) minmax(0, 1fr) auto;
    column-gap: var(--rh-news-slim-gap);
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    background: transparent;
}

.main-content .mod_newslist .rh-news-teaser.rh-news-no-image.rh-news-slim > .rh-news-slim-hover {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Maus-Hover sowie Touch-/Fokus-Fallback. */
.main-content .mod_newslist .rh-news-teaser.rh-news-slim:hover > .rh-news-slim-default,
.main-content .mod_newslist .rh-news-teaser.rh-news-slim:focus > .rh-news-slim-default,
.main-content .mod_newslist .rh-news-teaser.rh-news-slim:has(> .rh-news-slim-hover :focus) > .rh-news-slim-default {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.main-content .mod_newslist .rh-news-teaser.rh-news-slim:hover > .rh-news-slim-hover,
.main-content .mod_newslist .rh-news-teaser.rh-news-slim:focus > .rh-news-slim-hover,
.main-content .mod_newslist .rh-news-teaser.rh-news-slim:has(> .rh-news-slim-hover :focus) > .rh-news-slim-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.main-content .mod_newslist .rh-news-teaser.rh-news-slim:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

/* Rundes Bild */
.main-content .mod_newslist .rh-news-slim-hover .rh-news-image {
    width: var(--rh-news-slim-image-size);
    min-width: var(--rh-news-slim-image-size);
    height: var(--rh-news-slim-image-size);
    min-height: var(--rh-news-slim-image-size);
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 0;
    align-self: center;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-image figure,
.main-content .mod_newslist .rh-news-slim-hover .rh-news-image figure > a,
.main-content .mod_newslist .rh-news-slim-hover .rh-news-image picture {
    display: block;
    float: none;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    padding: 0;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-image figcaption {
    display: none;
}

/* Hover-Inhalt: Titel + Teaser */
.main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-content {
    min-width: 0;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-title {
    margin: 0 0 8px;
    font-family: var(--ty-font-heading);
    font-size: var(--ty-h2);
    font-weight: var(--ty-h2-weight);
    line-height: 1.25;
    color: var(--ty-color-heading);
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-title a {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-title a:hover,
.main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-title a:focus {
    color: inherit;
    text-decoration: none;
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-teaser-text {
    min-width: 0;
    font-family: var(--ty-font-body);
    font-size: var(--ty-current-size);
    line-height: var(--ty-leading-body);
    color: var(--ty-color-text);
}

.main-content .mod_newslist .rh-news-slim-hover .rh-news-teaser-text > :first-child { margin-top: 0; }
.main-content .mod_newslist .rh-news-slim-hover .rh-news-teaser-text > :last-child { margin-bottom: 0; }

.main-content .mod_newslist .rh-news-slim-hover .more {
    justify-self: end;
    margin: 0;
}

/* Tablet / Smartphone */
@media screen and (max-width: 900px) {
    .main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) {
        grid-template-columns: 1fr;
        row-gap: var(--rh-news-row-gap);
        padding-top: 40px;
        padding-bottom: 40px;
        border-top: 0;
        border-bottom: 0;
    }

    .main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2):last-child {
        border-bottom: 1px solid var(--rh-news-line-color);
    }

    .main-content .mod_newslist .rh-news1 > .rh-news-image,
    .main-content .mod_newslist .rh-news2 > .rh-news-image {
        grid-column: 1;
        grid-row: 1;
    }

    .main-content .mod_newslist .rh-news1 > .rh-news-text,
    .main-content .mod_newslist .rh-news2 > .rh-news-text {
        grid-column: 1;
        grid-row: 2;
    }

    /* Mobile/Tablet: Der ausgeblendete Hover-Inhalt darf die Höhe des
       Normalzustands nicht mitbestimmen. Deshalb werden die beiden
       Zustände hier nacheinander statt übereinander dargestellt. */
    .main-content .mod_newslist .rh-news-teaser.rh-news-slim {
        --rh-news-slim-image-size: 96px;
        display: block;
        min-height: 0;
        padding: 18px 0;
    }

    .main-content .mod_newslist .rh-news-slim-default {
        display: flex;
        min-height: 0;
    }

    .main-content .mod_newslist .rh-news-slim-hover {
        display: none;
        grid-template-columns: 1fr;
        row-gap: 8px;
        justify-items: center;
        text-align: center;
        opacity: 1;
        transform: none;
    }

    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:hover > .rh-news-slim-default,
    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:focus > .rh-news-slim-default,
    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:has(> .rh-news-slim-hover :focus) > .rh-news-slim-default {
        display: none;
    }

    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:hover > .rh-news-slim-hover,
    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:focus > .rh-news-slim-hover,
    .main-content .mod_newslist .rh-news-teaser.rh-news-slim:has(> .rh-news-slim-hover :focus) > .rh-news-slim-hover {
        display: grid;
        animation: rh-news-slim-mobile-in .35s ease both;
    }

    .main-content .mod_newslist .rh-news-teaser.rh-news-no-image.rh-news-slim > .rh-news-slim-hover {
        grid-template-columns: 1fr;
    }

    .main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-content {
        width: 100%;
        max-width: 680px;
        text-align: center;
    }

    .main-content .mod_newslist .rh-news-slim-hover .rh-news-hover-title {
        margin-bottom: 4px;
        text-align: center;
    }

    .main-content .mod_newslist .rh-news-slim-hover .rh-news-teaser-text {
        text-align: center;
    }

    .main-content .mod_newslist .rh-news-slim-hover .more {
        justify-self: center;
        margin-top: 2px;
    }
}

@media screen and (max-width: 599px) {
    .main-content .mod_newslist .rh-news-teaser:is(.rh-news1, .rh-news2) {
        row-gap: 24px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .main-content .mod_newslist .rh-news-teaser.rh-news-slim {
        --rh-news-slim-image-size: 88px;
        padding: 16px 0;
    }

    .main-content .mod_newslist .rh-news-slim-default h2 {
        margin-bottom: 8px;
    }

    .main-content .mod_newslist .rh-news-slim-hover {
        row-gap: 7px;
    }
}

@keyframes rh-news-slim-mobile-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .main-content .mod_newslist .rh-news-slim-default,
    .main-content .mod_newslist .rh-news-slim-hover {
        transition: none;
        animation: none;
    }
}



/* ==========================================================================
   TAO BILD-HOVER – RH OVERRIDE

   Allgemeiner Hover für verlinkte TAO-Bilder:
   – kein Plus-Zeichen
   – keine weisse Überlagerung
   – keine Unschärfe
   – weicher, dezenter Zoom

   Unabhängig von .rh-portfolio-grid.
   ========================================================================== */

:root {
    --rh-image-hover-scale: 1.035;
    --rh-image-hover-duration: 700ms;
    --rh-image-hover-easing: cubic-bezier(.2, .65, .25, 1);
}


/* --------------------------------------------------------------------------
   1. WEISSE TAO-HOVERFLÄCHE ENTFERNEN
   -------------------------------------------------------------------------- */

.media > figure a:hover::before,
.media > figure a:focus::before,
.content-image > figure a:hover::before,
.content-image > figure a:focus::before,
.content-gallery figure a:hover::before,
.content-gallery figure a:focus::before,
.image_container a:hover::before,
.image_container a:focus::before {
    content: none;
    background: none;
}


/* --------------------------------------------------------------------------
   2. TAO PLUS-ZEICHEN ENTFERNEN
   -------------------------------------------------------------------------- */

.media > figure a:hover::after,
.media > figure a:focus::after,
.content-image > figure a:hover::after,
.content-image > figure a:focus::after,
.content-gallery figure a:hover::after,
.content-gallery figure a:focus::after,
.image_container a:hover::after,
.image_container a:focus::after {
    content: none;
}


/* --------------------------------------------------------------------------
   3. WEICHE BILDANIMATION
   -------------------------------------------------------------------------- */

.media > figure a img,
.content-image > figure a img,
.content-gallery figure a img,
.image_container a img {
    filter: none;

    transform: scale(1);

    transition:
        transform
        var(--rh-image-hover-duration)
        var(--rh-image-hover-easing);
}


/* --------------------------------------------------------------------------
   4. HOVER / FOKUS
   -------------------------------------------------------------------------- */

.media > figure a:hover img,
.media > figure a:focus img,
.content-image > figure a:hover img,
.content-image > figure a:focus img,
.content-gallery figure a:hover img,
.content-gallery figure a:focus img,
.image_container a:hover img,
.image_container a:focus img {
    filter: none;

    transform:
        scale(
            var(--rh-image-hover-scale)
        );
}


/* --------------------------------------------------------------------------
   5. REDUZIERTE BEWEGUNG
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .media > figure a img,
    .content-image > figure a img,
    .content-gallery figure a img,
    .image_container a img {
        transition: none;
    }

}


/* =============================================================================
   RH TIMELINE
   ========================================================================== */

.rh-timeline {
    /* Icon-Kreis */
    --rh-timeline-icon-size: 50px;
    --rh-timeline-symbol-size: 16px;

    /* Abstände */
    --rh-timeline-gap-x: 25px;
    --rh-timeline-gap-y: 20px;

    /* Farben */
    --rh-timeline-accent: #284258;
    --rh-timeline-icon-color: #fff;

    /* H3 */
    --rh-timeline-h3-size: 20px;
    --rh-timeline-h3-color: #284258;
    --rh-timeline-h3-weight: 600;

    width: 100%;
}


/* --------------------------------------------------------------------------
   TEXTFARBE INVERTIEREN
   -------------------------------------------------------------------------- */

.-color-inverted .rh-timeline,
.rh-timeline.-color-inverted {
    --rh-timeline-h3-color: var(--ty-color-inverted, #fff);
}


/* --------------------------------------------------------------------------
   EINTRAG
   -------------------------------------------------------------------------- */

.rh-timeline__item {
    position: relative;

    display: grid;
    grid-template-columns: var(--rh-timeline-icon-size) minmax(0, 1fr);
    column-gap: var(--rh-timeline-gap-x);

    padding-bottom: var(--rh-timeline-gap-y);
}

.rh-timeline__item:last-child {
    padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   VERBINDUNGSLINIE
   -------------------------------------------------------------------------- */

.rh-timeline__item:not(:last-child)::before {
    content: "";

    position: absolute;
    top: var(--rh-timeline-icon-size);
    bottom: 0;
    left: calc(var(--rh-timeline-icon-size) / 2);

    width: 1px;

    background: var(--rh-timeline-accent);

    transform: translateX(-50%);
}


/* --------------------------------------------------------------------------
   KREIS
   -------------------------------------------------------------------------- */

.rh-timeline__marker {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--rh-timeline-icon-size);
    height: var(--rh-timeline-icon-size);

    border-radius: 50%;

    background: var(--rh-timeline-accent);
    color: var(--rh-timeline-icon-color);
}


/* --------------------------------------------------------------------------
   ROCKSOLID ICON
   -------------------------------------------------------------------------- */

.rh-timeline__icon {
    margin: 0;

    color: inherit;

    font-size: var(--rh-timeline-symbol-size);
    line-height: 1;
}

.rh-timeline__icon::before {
    margin: 0;
}


/* --------------------------------------------------------------------------
   EIGENES SVG
   -------------------------------------------------------------------------- */

.rh-timeline__svg {
    display: block;

    width: var(--rh-timeline-symbol-size);
    height: var(--rh-timeline-symbol-size);

    object-fit: contain;
}


/* --------------------------------------------------------------------------
   TEXT
   -------------------------------------------------------------------------- */

.rh-timeline__content {
    padding-top: .25rem;
}

.rh-timeline__content h3 {
    margin-top: 0;
    margin-bottom: .35em;

    font-size: var(--rh-timeline-h3-size);
    font-weight: var(--rh-timeline-h3-weight);
    color: var(--rh-timeline-h3-color);
}

.rh-timeline__content p {
    margin-top: 0;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media screen and (max-width: 599px) {

    .rh-timeline {
        --rh-timeline-icon-size: 40px;
        --rh-timeline-symbol-size: 15px;

        --rh-timeline-gap-x: 20px;
        --rh-timeline-gap-y: 20px;
    }

    .rh-timeline__content {
        padding-top: 0;
    }
}