/* =========================================
   News-Liste: Bild links, Titel + Datum + Teaser rechts
   ========================================= */

/* Grundlayout je Artikel */
.news .news-list-view .article {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr); /* Bildspalte – Textspalte */
    grid-template-rows: auto auto auto;          /* Titel, Datum, Teaser */
    column-gap: 40px;
    row-gap: 0.2rem;                             /* sehr kleiner Abstand Titel ? Datum */
    align-items: flex-start;

    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid #e2e2e2;
}

/* Alte Floats / Standard-Styles abschalten */
.news .news-list-view .article .header,
.news .news-list-view .article .news-img-wrap,
.news .news-list-view .article .teaser-text,
.news .news-list-view .article .footer {
    float: none !important;
}

/* Bild links über die ganze Höhe */
.news .news-list-view .article .news-img-wrap {
    grid-column: 1;
    grid-row: 1 / 4;   /* über alle drei Reihen (Titel, Datum, Teaser) */
    margin: 0;
}

.news .news-list-view .article .news-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* Titel rechts, ganz oben */
.news .news-list-view .article .header {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.news .news-list-view .article .header h3 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 600;
}

.news .news-list-view .article .header a {
    text-decoration: none;
    color: #1C9BEB;
}

.news .news-list-view .article .header a:hover {
    text-decoration: underline;
}

/* Datum direkt knapp unter dem Titel */
.news .news-list-view .article .footer {
    grid-column: 2;
    grid-row: 2;
    margin: 0;               /* kein extra Abstand – nur row-gap */
    align-self: flex-start;
}

.news .news-list-view .article .footer p {
    margin: 0;
}

/* Datums-Stil */
.news .news-list-view .article .news-list-date {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #8b8b8b;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Teaser + "Weiterlesen" unter dem Datum */
.news .news-list-view .article .teaser-text {
    grid-column: 2;
    grid-row: 3;
    margin: 0.75rem 0 0;     /* Abstand NACH dem Datum */
    max-width: 60rem;
}

.teaser-text{color:#444444;}


/* =========================================
   "Weiterlesen" als blauer, pillenförmiger Button
   ========================================= */

.news .news-list-view .article .teaser-text .more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.5rem 1.4rem;
    margin-top: 1rem;

    background-color: #1da1ff;     /* Button-Blau */
    color: #ffffff;
    border-radius: 999px;          /* Pille */
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;

    transition: background-color 0.15s ease, transform 0.1s ease,
                box-shadow 0.15s ease;
}

.news .news-list-view .article .teaser-text .more:hover,
.news .news-list-view .article .teaser-text .more:focus {
    text-decoration: none;
    background-color: #0d90ee;
    color:#fff!important;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    transform: translateY(-1px);  */
}

.news .news-list-view .article .teaser-text .more:active {
    transform: translateY(0);
    box-shadow: none;
}

/* =========================================
   Pagination (ohne Bullets, zentriert)
   ========================================= */

.news .f3-widget-paginator {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.news .f3-widget-paginator li {
    margin: 0;
}

.news .f3-widget-paginator li a,
.news .f3-widget-paginator li.current {
    display: inline-block;
    min-width: 2.25rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    text-align: center;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid #d0d0d0;
    color: #555;
    background: #fff;
}

.news .f3-widget-paginator li.current {
    background: #1C9BEB;
    color: #fff;
    border-color: #1C9BEB;
}

.news .f3-widget-paginator li a:hover {
    background: #f0f0f0;
}

/* "nächste" leicht hervorheben */
.news .f3-widget-paginator li.next a {
    font-weight: 500;
}

/* =========================================
   Responsive: auf kleineren Screens alles untereinander
   ========================================= */
@media (max-width: 768px) {
    .news .news-list-view .article {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: .4rem;
    }

    .news .news-list-view .article .header {
        grid-column: 1;
        grid-row: 1;
    }

    .news .news-list-view .article .news-img-wrap {
        grid-column: 1;
        grid-row: 2;
        max-width: 260px;
        margin-bottom: 0.5rem;
    }

    .news .news-list-view .article .footer {
        grid-column: 1;
        grid-row: 3;
        margin-bottom: 0.5rem;
    }

    .news .news-list-view .article .teaser-text {
        grid-column: 1;
        grid-row: 4;
    }
}


/* Details */


/****************************************************
 * News-Detailseite
 * Titel + Datum oben, darunter Bild links & Text rechts
 ****************************************************/

/* Grundlayout: Header oben, darunter Bild + Text nebeneinander */
.news.news-single .article {
    display: flex;
    flex-wrap: wrap;         /* Header 100%, darunter 2 Spalten */
    align-items: flex-start;
}

/* Header nimmt immer die volle Breite ein */
.news.news-single .article .header {
    flex: 0 0 100%;
    margin: 0 0 1.75rem 0;   /* fester Abstand zur Bild/Text-Zeile */
}

/* Überschrift */
.news.news-single .article .header h1 {
    margin: 0 0 .35rem 0;    /* kleiner, fixer Abstand zum Datum */
    font-size: 2.6rem;
    font-weight: 700;
}

/* Datum direkt unter der Überschrift (Abstand wächst nicht mehr) */
.news.news-single .article .header > p {
    margin: 0;               /* kein zusätzlicher Margin-Stau */
    font-size: 1rem;
    color: #444;          /* gleiche Farbe wie im Listing für das Datum */
}

.news.news-single .article .header .news-list-date {
    margin: 0;
}

/* Bild links unten im zweiten „Block“ */
.news.news-single .article .news-img-wrap {
    flex: 0 0 320px;         /* feste Bildbreite */
    max-width: 320px;
    margin: 0 2.5rem 2rem 0;
}

.news.news-single .article .news-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fließtext rechts daneben */
.news.news-single .article .news-text-wrap {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 0 2rem 0;
}

.news.news-single .article .news-text-wrap p {
    margin-top: 0;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Related-Bereich bekommt wieder volle Breite */
.news.news-single .article .news-related-wrap {
    flex: 0 0 100%;
    margin-top: 1.5rem;
}

/****************************************************
 * Responsive: auf kleinen Geräten alles untereinander
 ****************************************************/
@media (max-width: 768px) {
    .news.news-single .article {
        display: block;
    }

    .news.news-single .article .header {
        margin-bottom: 1.25rem;
    }

    .news.news-single .article .news-img-wrap {
        max-width: 100%;
        margin: 0 0 1.5rem 0;
    }

    .news.news-single .article .news-text-wrap {
        margin-bottom: 1.5rem;
    }
}



/****************************************************
 * News-Detail: Back-Link unten
 ****************************************************/
.news.news-single .news-backlink {
    margin: 2rem 0 0;
}

/* Button-Stil wie „Weiterlesen“ */
.news.news-single .news-backlink .back-link-button {
    display: inline-block;
    padding: 0.55rem 1.5rem;
    background: #1a73e8;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    box-shadow: 0 6px 14px rgba(26, 115, 232, 0.35);
    transition: background 0.15s ease, transform 0.15s ease,
                box-shadow 0.15s ease;
}

/* Pfeil davor */
.news.news-single .news-backlink .back-link-button::before {
    content: "? ";
    font-weight: 700;
}

/* Hover-Effekt */
.news.news-single .news-backlink .back-link-button:hover {
    background: #1666cc;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(26, 115, 232, 0.38);
    text-decoration: none;
}

/* Fokus-Outline für Tastatur-Nutzer */
.news.news-single .news-backlink .back-link-button:focus-visible {
    outline: 2px solid #0b57d0;
    outline-offset: 2px;
}