/*
 * ZIEL: EXT:desti-site/Resources/Public/Css/mobile-viewport.css
 *       Einbindung siehe mobile-viewport.typoscript (nach layout.css laden).
 *
 * Gehoert zur Umstellung des Viewport-Meta auf "width=1090".
 * Diese Datei sichert das Ergebnis gegen den Umbruch der rechten
 * Bannerspalte ab -- zwei unabhaengige Massnahmen:
 *
 * 1. iOS Safari vergroessert Schrift automatisch ("text autosizing"), sobald
 *    ein Block deutlich breiter als der Viewport ist. .left-content hat keine
 *    Breite (float, shrink-to-fit), waechst dadurch ueber 1000px - 263px
 *    hinaus und der rechte Float bricht darunter um. Genau das ist der
 *    Effekt, der am iPhone auftritt und in Desktop-Chrome nicht.
 *    text-size-adjust: 100% schaltet die Aufblaehung ab.
 *
 * 2. Die Spaltenzeile wird Flex-Container: die beiden Spalten sind damit
 *    Flex-Items mit flex-wrap: nowrap und koennen konstruktiv nicht mehr
 *    umbrechen -- unabhaengig von Schriftgroesse, Ad-Injection oder langen
 *    Woertern. Reicht der Platz nicht, schrumpft die Inhaltsspalte, statt
 *    die Bannerspalte nach unten zu schieben. Gleiches Vorgehen wie auf der
 *    Detailseite (detail-right-content.css).
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page-grid > .row.content-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Inhaltsspalte: behaelt ihre inhaltsabhaengige Breite, darf aber schrumpfen
   statt die Bannerspalte zu verdraengen. min-width: 0 hebt das
   Flex-Default min-width: auto auf, das genau dieses Schrumpfen blockiert. */
.page-grid > .row.content-row > .left-content {
    float: none;
    min-width: 0;
}

/* Bannerspalte: behaelt ihre in layout.css definierte Breite (263px, in den
   Layout-Varianten abweichend) und schrumpft nie. */
.page-grid > .row.content-row > .right-content {
    float: none;
    flex: 0 0 auto;
}