.news { --nw-css: "newsmodul v7"; }

.frame-type-list .frame-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
}
.frame-type-list .frame-header .element-subheader {
    order: -1;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nw-accent, #1b3f6e) !important;
}
.frame-type-list .frame-header .element-subheader span { color: inherit; }
.frame-type-list .frame-header .element-header {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nw-title, #2b2b2b);
}
.frame-type-list .frame-header .element-header span { color: inherit; }
.frame-type-list .frame-header .element-header a { color: inherit; text-decoration: none; }
.frame-type-list .frame-header .element-header a:hover { color: var(--nw-accent, #1b3f6e); }
@media (max-width: 575px) {
    .frame-type-list .frame-header { margin-bottom: 22px; }
}

/* --------------------------- LISTE / ANRISS -------------------------- */
.news-list-view ul.list-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0; padding: 0;
    border: 0; border-radius: 0;
    list-style: none;
}
@media (min-width: 576px)  { .news-list-view ul.list-group { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px)  { .news-list-view ul.list-group { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .news-list-view ul.list-group { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* Wenige Meldungen: nicht ueber die volle Breite verteilen, sonst steht eine
   einzelne Karte verloren am linken Rand. Statt vier Spalten nur so viele wie
   noetig, mittig gesetzt und in der Breite gedeckelt. */
@media (min-width: 576px) {
    .news-list-view ul.list-group:has(> li:only-child) {
        grid-template-columns: minmax(0, 380px);
        justify-content: center;
    }
    .news-list-view ul.list-group:has(> li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 380px));
        justify-content: center;
    }
}
@media (min-width: 992px) {
    .news-list-view ul.list-group:has(> li:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 380px));
        justify-content: center;
    }
}

/* Bootstrap-list-group-Optik neutralisieren – wir bauen Karten. */
.news-list-view .list-group-item {
    padding: 0; margin: 0;
    border: 0; border-radius: 0;
    background: transparent;
}

.news-list-view .news-list-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    background: #fff;
    border: 1px solid var(--nw-line, rgba(0,0,0,.12));
    border-radius: var(--nw-radius, 12px);
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.news-list-view .news-list-item:hover {
    transform: translateY(-3px);
    border-color: var(--nw-accent, #1b3f6e);
    box-shadow: 0 6px 18px rgba(0,0,0,.09);
}

/* Bildspalte -> Kartenkopf mit festem Ausschnitt: egal ob Hoch- oder
   Querformat hochgeladen wurde, die Reihe bleibt ruhig. */
.news-list-view .news-list-item > .col-md-3 {
    flex: none; width: 100%; max-width: none; padding: 0;
}
.news-list-view .news-list-item > .col-md-3 a { display: block; }
.news-list-view .news-list-item > .col-md-3 img {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    transition: transform .35s ease;
}
.news-list-view .news-list-item:hover > .col-md-3 img { transform: scale(1.03); }

/* Platzhalter (Praxis-Logo, wenn eine Meldung kein Foto hat): einpassen
   statt beschneiden – sonst wird das Logo angeschnitten. Pfad steht im
   TypoScript unter plugin.tx_news.settings.list.media.dummyImage. */
.news-list-view .news-list-item > .col-md-3 img[src*="logo"],
.news-list-view .news-list-item > .col-md-3 img[src*="platzhalter"],
.news-list-view .news-list-item > .col-md-3 img[src*="dummy"] {
    object-fit: contain;
    background: var(--nw-dummy-bg, #fff);
    padding: 40px 40px;
    border-bottom: 1px solid var(--nw-line, rgba(0,0,0,.12));
}
.news-list-view .news-list-item:hover > .col-md-3 img[src*="logo"],
.news-list-view .news-list-item:hover > .col-md-3 img[src*="platzhalter"],
.news-list-view .news-list-item:hover > .col-md-3 img[src*="dummy"] { transform: none; }

/* Textspalte -> Kartenkoerper. */
.news-list-view .news-list-item > [class*="col-md-9"] {
    flex: 1 1 auto;
    width: 100%; max-width: none;
    display: flex; flex-direction: column;
    padding: 20px 22px 22px;
}
.news-list-view .news-list-item h3 {
    font-size: 17px; line-height: 1.25; font-weight: 600;
    margin: 0 0 8px;
}
.news-list-view .news-list-item h3 a { color: var(--nw-title, #2b2b2b); text-decoration: none; }
.news-list-view .news-list-item h3 a:hover { color: var(--nw-accent, #1b3f6e) !important; }
.news-list-view .news-list-item .extra {
    font-size: 13px; color: var(--nw-meta, #797676); margin: 0 0 10px !important;
}
.news-list-view .news-list-item .lead,
.news-list-view .news-list-item .lead p {
    font-size: 14px; line-height: 1.55; color: var(--nw-muted, #5f6b7e);
    font-weight: 400; margin: 0;
}
.news-list-view .news-list-item .lead { margin-bottom: 18px; }

/* "Weiterlesen" unten buendig – so stehen die Buttons in einer Linie,
   auch wenn die Teaser verschieden lang sind. font-style/size bewusst
   gesetzt: manche Layer haben globale .btn-Regeln (kursiv, 1.2rem),
   die fuer eine Kartenaktion zu gross waeren. */
.news-list-view .news-list-item .btn-read-more {
    margin-top: auto;
    align-self: flex-start;
    background: var(--nw-btn-bg, var(--nw-accent, #1b3f6e));
    border-color: var(--nw-btn-bg, var(--nw-accent, #1b3f6e));
    color: var(--nw-btn-text, #fff);
    border-radius: 50px;
    padding: 9px 20px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}
.news-list-view .news-list-item .btn-read-more:hover,
.news-list-view .news-list-item .btn-read-more:focus {
    background: var(--nw-btn-bg-hover, var(--nw-accent-dark, #122b4b));
    border-color: var(--nw-btn-bg-hover, var(--nw-accent-dark, #122b4b));
    color: var(--nw-btn-text, #fff);
}

.news-list-view .page-navigation { margin-top: 26px; }
.news-list-view .page-navigation ul.pagination { justify-content: center; }

/* --------------------------- DETAILANSICHT --------------------------- */
/* Ausgangslage: .row mit Text (col-md-8) und schmaler Bildspalte
   (col-md-4), in der alle Bilder untereinander stehen ("Wurst").
   Wir loesen das Zwei-Spalten-Raster auf: Text volle Breite,
   darunter ein Galerie-Raster. */
.news-single .article > .row { display: block; }
.news-single .article > .row > [class*="col-md-8"] {
    width: 100%; max-width: none; flex: none;
    padding-left: 0; padding-right: 0;
}
.news-single .article > .row > [class*="col-md-4"] {
    width: 100%; max-width: none; flex: none;
    padding-left: 0; padding-right: 0;
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 576px)  { .news-single .article > .row > [class*="col-md-4"] { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px)  { .news-single .article > .row > [class*="col-md-4"] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .news-single .article > .row > [class*="col-md-4"] { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.news-single .thumbnail {
    margin: 0; padding: 0; border: 0;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
}
.news-single .thumbnail a { display: block; }
.news-single .thumbnail img {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform .35s ease;
}
.news-single .thumbnail:hover img { transform: scale(1.04); }
/* Aufmacherbild: steht im Textblock (Detail.html v5) und wird vom Text
   umflossen. Breite = genau eine Galeriekachel, damit oben links und
   unten im Raster dieselbe Kachelgroesse zu sehen ist. */
.news-single .news-lead { float: none; width: 100%; margin: 0 0 18px; }
@media (min-width: 768px) {
    .news-single .news-lead {
        float: left;
        width: calc((100% - 2 * 14px) / 3);
        margin: 4px 22px 14px 0;
    }
}
@media (min-width: 992px) {
    .news-single .news-lead { width: calc((100% - 2 * 14px) / 3); }
}
@media (min-width: 1200px) {
    .news-single .news-lead { width: calc((100% - 4 * 12px) / 5); min-width: 200px; }
}
/* Galerie beginnt immer unter dem Umfluss, nie daneben. */
.news-single .article > .row > [class*="col-md-4"] { clear: both; }

.news-single .article .extra { font-size: 14px; color: var(--nw-meta, #797676); }
.news-single .news-text-wrap p { font-size: 16px; line-height: 1.7; }
.news-single .news-backlink-wrap { margin-top: 34px; }
.news-single .news-backlink-wrap a { color: var(--nw-accent, #1b3f6e); font-weight: 600; text-decoration: none; }
.news-single .news-backlink-wrap a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .news-list-view .news-list-item,
    .news-list-view .news-list-item:hover,
    .news-list-view .news-list-item img,
    .news-single .thumbnail img { transition: none; transform: none; }
}

/* ----------------------------- SLIDER -------------------------------- */
/* Karten-Karussell fuer die Listenansicht. Aktiv nur, wenn das Plugin im
   Backend den Rahmen "News: Karussell" hat (.frame-news-slider);
   newsmodul.js haengt dann .nw-slider an und baut Viewport + Pfeile.
   Ohne JS bleibt es eine waagerecht scrollbare Reihe – nichts bricht.
   Freischalten je Site im Seiten-TSconfig der Wurzelseite:
     TCEFORM.tt_content.frame_class.addItems.news-slider = News: Karussell */
.nw-slider { position: relative; }
.nw-slider .nw-slider-viewport { overflow: hidden; }

.nw-slider ul.list-group {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.nw-slider ul.list-group::-webkit-scrollbar { display: none; }

.nw-slider .list-group-item {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
}
@media (min-width: 576px)  { .nw-slider .list-group-item { width: calc((100% - 18px) / 2); } }
@media (min-width: 992px)  { .nw-slider .list-group-item { width: calc((100% - 36px) / 3); } }
@media (min-width: 1200px) { .nw-slider .list-group-item { width: calc((100% - 54px) / 4); } }

.nw-slider .nw-slider-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.nw-slider .nw-slider-btn {
    width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--nw-line, rgba(0,0,0,.12));
    border-radius: 50%;
    background: #fff;
    color: var(--nw-title, #2b2b2b);
    font-size: 22px; line-height: 40px; font-weight: 600;
    font-style: normal;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.nw-slider .nw-slider-btn:hover:not(:disabled) {
    border-color: var(--nw-accent, #1b3f6e);
    color: var(--nw-accent, #1b3f6e);
}
.nw-slider .nw-slider-btn:disabled { opacity: .35; cursor: default; }

/* ----------------------------- LIGHTBOX ------------------------------ */
/* Wird von fileadmin/theme/js/newsmodul.js erzeugt. */
.nw-lb {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,18,28,.92);
    opacity: 0; transition: opacity .2s ease;
}
.nw-lb.is-open { opacity: 1; }
.nw-lb img {
    max-width: 92vw; max-height: 88vh;
    width: auto; height: auto;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.nw-lb button {
    position: absolute; z-index: 1;
    width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #2b2b2b;
    font-size: 24px; line-height: 46px; font-weight: 600;
    font-style: normal;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, color .15s ease;
}
.nw-lb button:hover { background: #fff; color: var(--nw-accent, #1b3f6e); transform: scale(1.06); }
.nw-lb .nw-lb-close { top: 18px; right: 18px; font-size: 22px; }
.nw-lb .nw-lb-prev  { left: 18px; top: 50%; margin-top: -23px; }
.nw-lb .nw-lb-next  { right: 18px; top: 50%; margin-top: -23px; }
.nw-lb .nw-lb-count {
    position: absolute; bottom: 18px; left: 0; right: 0;
    text-align: center; color: rgba(255,255,255,.75); font-size: 13px;
}
@media (max-width: 575px) {
    .nw-lb .nw-lb-prev { left: 8px; }
    .nw-lb .nw-lb-next { right: 8px; }
    .nw-lb .nw-lb-close { top: 10px; right: 10px; }
}
body.nw-lb-open { overflow: hidden; }