/* =====================================================================
   newsmodul.css  ·  v7  ·  2026-08-10
   ---------------------------------------------------------------------
   Gemeinsames Aussehen des News-Moduls (EXT:news) fuer ALLE HeCoPa-Sites.
   Gehoert zu fileadmin/theme/js/newsmodul.js.

   Einbinden im Root-Template der jeweiligen Praxis -> Setup:
       page.includeCSS.newsModul  = fileadmin/theme/css/newsmodul.css
       page.includeJS.newsModul   = fileadmin/theme/js/newsmodul.js
   Die Reihenfolge der Einbindung spielt KEINE Rolle: diese Datei setzt
   selbst keine Variablen, sondern nutzt nur Rueckfallwerte direkt in den
   Eigenschaften. Setzt eine Praxis eine Variable, gewinnt sie immer.

   Farben je Praxis im eigenen Layer setzen, z. B.:
       .news { --nw-accent: #ff8c59; }      -> Kretzschmar
       .news { --nw-accent: #133d77; }      -> physio-nw

   Verfuegbare Variablen (Rueckfallwert in Klammern):
       --nw-accent       (#1b3f6e)      Buttons, Hover, Rahmen aktiv
       --nw-accent-dark  (#122b4b)      Button im Hover
       --nw-line         (rgba(0,0,0,.12))  Kartenrahmen
       --nw-title        (#2b2b2b)      Kartenueberschrift
       --nw-muted        (#5f6b7e)      Teaser
       --nw-meta         (#8a8a8a)      Datum
       --nw-dummy-bg     (#fff)         Grund hinterm Platzhalter-Logo
       --nw-radius       (12px)         Eckenradius der Karten
       --nw-btn-bg       (= --nw-accent)      "Weiterlesen": Flaeche
       --nw-btn-bg-hover (= --nw-accent-dark) "Weiterlesen": Flaeche im Hover
       --nw-btn-text     (#fff)               "Weiterlesen": Schrift

   Zur Lesbarkeit des Buttons: helle Markenfarben (Orange, Oliv) tragen
   keine weisse Schrift – dort --nw-btn-text auf einen dunklen Ton setzen
   statt die Markenfarbe zu verfaelschen.

   Markup kommt aus den Bootstrap-5-Templates von EXT:news (geteilt,
   NICHT anfassen):
     Liste   .news .news-list-view > ul.list-group > li.list-group-item
             > .row.news-list-item > .col-md-3 (Bild) + .col-md-9 (Text)
     Detail  .news.news-single .article > .row
             > .col-md-8 (Text) + .col-md-4 > .thumbnail > img
   Umbau nur per CSS: Karten-Raster statt Zeilenliste, Galerie-Raster
   statt schmaler Bildspalte.

   Debug-Marker gegen Stale-Cache: --nw-css auf .news
   ---------------------------------------------------------------------
   Aenderungen
   v7  Farbe der Vorzeile mit !important gesetzt. Grund: mehrere Layer
       enthalten die Zeile ".bp-page-footer p, h4 { color:black !important }",
       und wegen des Kommas trifft "h4" JEDE h4 der Site, nicht nur die im
       Fusszeilenbereich. Ohne !important bliebe die Vorzeile schwarz.
   v6  Ueberschrift ueber der Liste kommt jetzt aus den Feldern des Plugins
       (Ueberschrift + Untertitel) und sieht auf allen Sites gleich aus.
       Der Untertitel steht als kleine Vorzeile darueber.
       Dafuer muessen die Farbvariablen im Site-CSS eine Zeile breiter
       gefasst werden:  .news, .frame-type-list { --nw-accent: ...; }
   v5  Liste: eine oder zwei Meldungen kleben nicht mehr am linken Rand –
       das Raster nimmt dann nur so viele Spalten, wie es Meldungen gibt,
       und steht mittig. Kachelbreite dabei auf 380 px begrenzt.
   v4  Detailansicht: Galerie ab 1200px fuenfspaltig statt vierspaltig.
       Aufmacher ueber die volle Breite entfernt – das erste Foto steht
       jetzt als .news-lead links im Text (Umfluss), genau so breit wie
       eine Galeriekachel. Setzt Detail.html v5 voraus.
   v3  Platzhalter-Logo mit Innenabstand, Slider, Lightbox.
   ===================================================================== */
.news { --nw-css: "newsmodul v7"; }

/* ------------------- UEBERSCHRIFT UEBER DER LISTE -------------------- */
/* Universell statt handgebauter HTML-Bausteine je Praxis: die Ueberschrift
   wird im Plugin selbst gepflegt (Registerkarte "Allgemein" -> Ueberschrift,
   Typ h3, plus Untertitel). Das Theme rendert daraus
       <header class="frame-header">
         <h3 class="element-header"><span>...</span></h3>
         <h4 class="element-subheader">...</h4>
       </header>
   Der Untertitel wird hier als kleine Vorzeile UEBER die Ueberschrift
   gedreht - dieselbe Optik wie die Sektionskoepfe der Startseiten.

   WICHTIG: die Kopfzeile steht VOR .news, erbt also deren Variablen nicht.
   Im Site-CSS darum beide Anker angeben:
       .news, .frame-type-list { --nw-accent: #9cbe5c; ... } */
.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, #8a8a8a); 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, #8a8a8a); }
.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; }