/*
 * ZIEL: EXT:desti-site/Resources/Public/Css/news-mobile-font.css
 *       Einbindung analog mobile-viewport.css (nach layout.css laden):
 *       page.includeCSS.newsMobileFont = EXT:desti-site/Resources/Public/Css/news-mobile-font.css
 *
 * Groessere Artikelschrift auf Handys (Kundenwunsch 08/2026).
 *
 * Ausgangslage: Durch das Viewport-Meta "width=1090" (siehe
 * mobile-viewport.typoscript) wird die Desktop-Seite am Handy auf
 * Displaybreite herunterskaliert (iPhone: Faktor ~0,36). Der Fliesstext der
 * Artikel steht in layout.css auf 12px (.news-detail-teaser, .news-text-wrap)
 * -- effektiv ~4px am Handy. Das iOS-Text-Autosizing, das das frueher etwas
 * abgefedert hat, ist in mobile-viewport.css bewusst abgeschaltet
 * (text-size-adjust: 100%), weil es die rechte Bannerspalte umbrechen liess.
 *
 * Loesung: Schrift nur auf der News-Detailseite (.news-single) und nur fuer
 * Touch-Geraete vergroessern. Breiten-Media-Queries (max-width) funktionieren
 * hier NICHT -- der Layout-Viewport ist immer 1090px.
 *
 * ACHTUNG Samsung-Bug (der Grund fuer die zweite Query-Haelfte):
 * Samsung-Geraete (alle seit ca. 2015, z.B. A56) melden per virtuellem
 * Treiber "sec_touchpad" ein nicht vorhandenes Touchpad ans System. Chromium
 * (Chrome UND Samsung Internet) liefert dort hover:hover und teils
 * pointer:fine -- eine reine (hover: none)/(pointer: coarse)-Query greift auf
 * Samsung-Handys deshalb nicht (Kundenmeldung 08/2026, reproduziert auf A56).
 * Siehe https://issues.chromium.org/issues/41445959 und
 * https://www.ctrl.blog/entry/css-media-hover-samsung.html
 *
 * Daher Doppelabsicherung (ODER-verknuepft):
 *   1. (pointer: coarse)          -- normale Android-/iOS-Geraete, Tablets
 *   2. (max-device-width: 550px)  -- faengt Samsung-Handys ueber die
 *      physische Displaybreite in CSS-px (~360-430px); anders als max-width
 *      unabhaengig vom 1090px-Layout-Viewport. Deprecated, aber aus
 *      Kompatibilitaetsgruenden dauerhaft in allen Browsern unterstuetzt.
 * Desktop bleibt aussen vor: Monitore haben device-width >= 1024 und
 * pointer:fine; Touch-Laptops haben als primaeren Pointer ebenfalls "fine".
 * Bekannte Luecke: Samsung-TABLETS (device-width ~800) fallen durch beide
 * Bedingungen, falls auch dort der Phantom-Touchpad-Treiber aktiv ist --
 * dort bleibt die alte Darstellung (Skalierung ~0,7, weniger kritisch).
 *
 * Gepruefte Werte (Artikel "Lange Nacht der Museen", Viewport 1090px):
 *   - kein horizontaler Ueberlauf, Spaltenlayout unveraendert (782px + 300px)
 *   - ~45 Zeichen pro Zeile bei 32px Verdana in der 782px-Spalte (ideal 45-75)
 *   - effektive Groesse am iPhone: Fliesstext ~11,5px statt ~4px,
 *     Ueberschrift ~16px
 *
 * Bewusst NICHT angefasst: Startseite/Listenansichten, Menue, Bannerspalte --
 * nur die Lese-Typografie des Artikels.
 *
 * Hinweis Tablets: iPads matchen (pointer: coarse) ebenfalls; dort wirkt die
 * Schrift durch den geringeren Skalierungsfaktor (~0,7) entsprechend groesser
 * (~22px). Falls unerwuenscht, Zeile 1 der Query auf
 * "(pointer: coarse) and (max-device-width: 550px)" einschraenken.
 */

@media (pointer: coarse), (max-device-width: 550px) {

    /* Fliesstext + Vorspann ("Fulda - Von ... -") */
    .news-single .news-detail-teaser,
    .news-single .news-text-wrap {
        font-size: 32px;
        line-height: 1.5;
    }

    /* Grauer Teasertext (news-basic.css: 15px) */
    .news-single .teaser-text {
        font-size: 34px;
        line-height: 1.5;
    }

    /* Artikel-Ueberschrift (layout.css: 16px) */
    .news-single .news-detail-title {
        font-size: 44px;
        line-height: 1.25;
    }

    /* Zwischenueberschriften in Inhaltselementen (layout.css: 16px) */
    .news-single .news-ce h2 {
        font-size: 38px;
        line-height: 1.3;
    }

    /* Bildunterschriften (layout.css: 12px) */
    .news-single .news-img-caption {
        font-size: 24px;
        line-height: 1.4;
    }

    /* Datumszeile */
    .news-single .news-detail-date {
        font-size: 22px;
    }
}