/* =================================================================== FIX337 - Mobile Oberflaeche fuer iPhone und iPad. GRUNDREGEL DIESER DATEI: Am PC darf sich NICHTS aendern. Deshalb steht jede einzelne Regel hier in @media (pointer: coarse) and (max-width: 1250px) "pointer: coarse" trifft nur auf Geraete zu, die mit dem Finger bedient werden. Ein Rechner mit Maus oder Touchpad meldet "pointer: fine" und erfuellt die Bedingung nie - egal, wie schmal das Fenster gezogen wird. Die zweite Bedingung ist die Sicherheitsleine fuer Rechner mit Beruehrungsbildschirm: ueber 1250 px bleibt es ebenfalls beim Schreibtisch-Layout. Die Datei wird NACH index.html und app-overlays.css geladen; sie ueberschreibt also, ohne dass an den bestehenden Regeln etwas geaendert werden musste. ZIELGERAETE (CSS-Pixel, nicht Bildpunkte): iPhone 17 Pro Max hoch 440 x 956 quer 956 x 440 iPad Pro 11" (2018) hoch 834 x 1194 quer 1194 x 834 Daraus die Baender weiter unten: - alles bis 1250 Grundgeruest, ausfahrbare Seitenleiste - bis 1100 Spieler und Raster brechen auf eine Spalte um - bis 700 Handy hoch: eine Spalte ueberall - Hoehe bis 560 Handy quer: nur 440 px hoch, Kopfzeile schrumpft =================================================================== */ @media (pointer: coarse) and (max-width: 1250px) { /* ----------------------------------------------------------------- 1. HOEHE: dvh statt vh. Safari auf dem iPhone blendet Adress- und Werkzeugleiste beim Scrollen ein und aus. "100vh" ist die Hoehe OHNE diese Leisten - der untere Rand der Seite liegt damit dauerhaft hinter der Werkzeugleiste, und genau dort sitzen hier die Bedienelemente der Spieler. "100dvh" ist die jeweils sichtbare Hoehe und waechst/schrumpft mit. ----------------------------------------------------------------- */ body { height: 100dvh; } .sidebar { height: 100dvh; } .main-scroll { height: 100dvh; } /* ----------------------------------------------------------------- 2. SEITENLEISTE AUSFAHRBAR. 254 px feste Leiste sind auf einem 440 px breiten Handy zwei Drittel des Bildschirms. Sie liegt jetzt ausserhalb und faehrt ueber die Seite, wenn die Menuetaste gedrueckt wird. Das gilt bis 1250 px, also auch auf dem iPad im Querformat: dort werden die vollen 1194 px fuer den Inhalt gebraucht, damit die dreispaltigen Spieler (260 + 460 + 280 + Abstaende = 1032 px) ueberhaupt nebeneinander passen. ----------------------------------------------------------------- */ .sidebar { width: min(284px, 80vw); min-width: 0; transform: translateX(-100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1); box-shadow: none; /* Die Kopfleiste ist sticky mit z-index:100 (app-overlays.css). Ohne einen hoeheren Wert schneidet sie der ausgefahrenen Leiste den Kopf ab - das Logo verschwand dahinter. Dialoge liegen weiter darueber (ab 500). */ z-index: 120; padding-left: var(--sicher-links); overflow-y: auto; overscroll-behavior: contain; } body.mobil-menue-auf .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .65); } .main-scroll { margin-left: 0; } /* Abdunklung hinter der ausgefahrenen Leiste - schliesst bei Beruehrung. */ .mobil-abdunkeln { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 110; opacity: 0; pointer-events: none; transition: opacity .24s; } body.mobil-menue-auf .mobil-abdunkeln { opacity: 1; pointer-events: auto; } /* Die Menuetaste selbst. Am PC steht sie auf display:none (Regel in index.html) und wird hier eingeschaltet. */ .mobil-menue { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); color: #fff; padding: 0; cursor: pointer; } .mobil-menue svg { width: 19px; height: 19px; } /* ----------------------------------------------------------------- 3. BEDIENBARKEIT MIT DEM FINGER. Apples Richtwert fuer eine sicher treffbare Flaeche sind 44 x 44 px. Die Oberflaeche ist fuer die Maus gebaut - Listenzeilen und kleine Tasten liegen darunter. ----------------------------------------------------------------- */ .nav-item { padding-top: 11px; padding-bottom: 11px; } .btn { min-height: 42px; padding: 11px 16px; } .ltv-row, .net-history-row { min-height: 44px; } .ltv-filter-btn { width: 42px; min-height: 42px; } /* Auf Beruehrungsgeraeten gibt es kein "Zeiger darueber" - der Schwebezustand bleibt nach dem Tippen haengen und sieht aus wie eine Auswahl. */ .ltv-row:hover, .rad-group-head.ik-gruppe:hover { background: none; } /* ----------------------------------------------------------------- 3a. RAENDER UND KOPFLEISTE. Ein gemeinsamer Seitenrand fuer ALLES. Vorher nahm die Kopfleiste 12 px und der Inhalt 16 px - die Menuetaste stand damit acht Bildpunkte weiter aussen als die Kante der Karten darunter. Das sieht nicht nach Absicht aus, sondern nach Versehen, und auf dem Geraet wirkt die Leiste dadurch an den Rand gedraengt. "max(...)" statt fester Werte wegen der Randbereiche: im Querformat liegen dort die abgerundete Ecke und die Kameraaussparung, und dann muss der Abstand groesser werden als der Grundwert. ----------------------------------------------------------------- */ .topbar { padding-left: max(16px, var(--sicher-links)); padding-right: max(16px, var(--sicher-rechts)); /* * "max" und nicht "10px + Rand": Meldet das Geraet einen sicheren Rand, * ist DER das Mass - der Grundabstand steckt dann schon darin. Beides * zu addieren hat die Leiste in FIX449 unnoetig hoch gemacht und * zusammen mit "viewport-fit=cover" den Inhalt vom unteren Rand * weggeschoben; siehe die Begruendung in index.html. * * Der Abstand liegt weiterhin als PADDING auf der Leiste, nicht als * Abstand darueber - nur so faerbt ihr eigener Hintergrund den Streifen * mit. Ein margin liesse dort den Grund des Dokuments durchscheinen. */ padding-top: max(10px, var(--sicher-oben)); gap: 10px; } .content { padding-left: max(16px, var(--sicher-links)); padding-right: max(16px, var(--sicher-rechts)); /* Hier stand "padding-bottom". Es hat nie gewirkt: Die Regel ".main-scroll > .content" in css/app-overlays.css ist spezifischer und setzt 10px. Der sichere Rand unten sitzt seit FIX449 an der Fusszeile, dem letzten Element in der Spalte. */ } /* FIX453: Hier stand kurzzeitig "padding-top: var(--sicher-oben)" fuer die ausgefahrene Seitenleiste. Wieder raus - zusammen mit dem Rest von FIX449, weil sich sonst nicht sagen laesst, welche der Aenderungen die Darstellung verschoben hat. Eine Stufe nach der anderen. */ /* * Das Suchfeld bekommt den freien Platz, statt bei 180 px abgeschnitten zu * werden ("Suche (Sender, Aufnahm|"). Der Fuellabstand daneben ist auf einem * Handy reine Verschwendung - dort sind 73 px leer, waehrend nebenan der Text * nicht hinpasst. Auf breiten Geraeten bleibt er, dort haelt er die Messwerte * rechts an ihrem Platz. */ @media (max-width: 820px) { .topbar .topbar-spacer { display: none; } .topbar .search { max-width: none; min-width: 0; flex: 1 1 auto; } } /* ----------------------------------------------------------------- 3b. DIE FUSSZEILE GEHOERT IMMER NACH UNTEN. Die Radioseiten sind die einzigen mit "flex: 1 1 auto; min-height: 0" - sie sollen am Rechner den Rest der Hoehe ausfuellen und gar nicht rollen. "min-height: 0" erlaubt der Box aber, unter ihre INHALTSHOEHE zu schrumpfen: die Box endet dann sauber an der Fusszeile, ihr Inhalt laeuft jedoch weiter und legt sich darueber. Genau so stand "Alle Rechte vorbehalten" mitten in der Lautstaerkezeile des Spielers. Am Rechner faellt das nie auf, weil die Seiten dort nie laenger werden als das Fenster - deshalb wurde diese Gruppe ausgenommen, als derselbe Fehler in app-overlays.css fuer alle anderen Seiten behoben wurde. Auf einem Geraet werden sie sehr wohl laenger, und zwar in JEDER Groesse: selbst auf dem iPad im Querformat, wo die drei Spalten nebeneinander passen, ragte die UKW-Seite noch zwei Pixel hinein. Deshalb gilt das hier fuer alle Beruehrungsgeraete und nicht erst ab einer bestimmten Breite. Damit verhalten sich die Radioseiten mobil wie jede andere Seite, und "margin-top: auto" an der Fusszeile (app-overlays.css) haelt sie weiter am unteren Rand, wenn eine Seite den Bildschirm nicht fuellt. ----------------------------------------------------------------- */ /* * NUR solange die Spalten UNTEREINANDER stehen (bis 1100 px). * * Stehen sie nebeneinander - iPad im Querformat -, ist das urspruengliche * Verhalten das richtige: die Seite fuellt die Fensterhoehe, die Spalten sind * so hoch wie die Seite, und die Senderliste rollt IN ihrer Spalte. Nimmt man * der Seite diese Hoehe, hat die Liste keine Schranke mehr, waechst auf ihre * volle Laenge (bei 600 Sendern rund 28 000 px) und schiebt Spieler und * Messwerke aus dem Bild. Genau das war auf dem iPad zu sehen. */ @media (max-width: 1100px) { .main-scroll > .content > #page-radio:not([hidden]), .main-scroll > .content > #page-radio-dab:not([hidden]), .main-scroll > .content > #page-radio-ukw:not([hidden]), .main-scroll > .content > #page-radio-internet:not([hidden]) { overflow: visible; flex: 0 0 auto; min-height: auto; } } /* * Ueber 1100 px bleibt es beim Schreibtischverhalten - dort war nur noch ein * Rest von zwei Pixeln offen, mit dem die UKW-Seite in die Fusszeile ragte. * Der wird abgeschnitten statt die Hoehenaufteilung umzubauen: in dieser Lage * soll ohnehin nichts rollen, der Inhalt passt sich der Fenstergroesse an. */ @media (min-width: 1101px) { .page .rad-wrap, .page .ltv-wrap { overflow: hidden; } /* * FIX341: und wenn es doch einmal nicht passt, rollt die Spielerspalte, * statt den Rest abzuschneiden. Vorher stand dort "overflow: hidden" - was * nicht in die Karte passte, war schlicht weg (auf dem iPad die * Lautstaerkezeile und ein Teil der Tasten). * * FIX344: Das bleibt als Sicherheitsnetz, soll aber nicht mehr gebraucht * werden - siehe unten, der Spieler passt sich jetzt wirklich an. */ .rad-wrap .rad-player, .ltv-wrap .ltv-player { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ----------------------------------------------------------------- FIX344: DER SPIELER PASST SICH AN, STATT ZU ROLLEN. Bisher waren alle Teile des Spielers ueber clamp(min, Xdvh, max) bemessen. Das schrumpft mit - aber nur bis zum jeweiligen Mindestwert, und die Summe dieser Mindestwerte ist groesser als eine knappe Fensterhoehe. Unterhalb von etwa 720 px blieb deshalb ein Rest, den man nur wegrollen konnte. Jetzt uebernimmt die Flexbox das Rechnen. Der Spieler ist eine Spalte; genau EIN Kind darf den uebrigen Platz schlucken statt eine feste Groesse zu haben: die Bildreihe. Alle anderen Teile - Kopfzeile, Kennzeichen, Messwerke, Tasten, Lautstaerke - behalten ihre natuerliche Hoehe, und das Titelbild nimmt exakt, was uebrig bleibt. Damit passt der Inhalt bei JEDER Hoehe, ohne dass irgendwo eine Zahl geraten werden muesste. ----------------------------------------------------------------- */ .rad-wrap .rad-player .rad-art-row { flex: 1 1 auto; min-height: 0; align-items: center; } .rad-wrap .rad-player .rad-cover { /* Quadratisch bleiben, aber die Hoehe gibt den Ton an. */ height: 100%; max-height: 100%; width: auto; aspect-ratio: 1 / 1; min-height: 0; max-width: 100%; } /* * Die Messwerke duerfen etwas kleiner werden, damit die Bildreihe nicht * als einzige die ganze Last traegt und bei sehr flachen Fenstern auf * nahezu nichts zusammenfaellt. Untergrenze von 96 auf 72 px. */ .rad-wrap .vu-meter.rad-vu-meter { width: clamp(72px, 21dvh, 280px); } /* * Bei knapper Hoehe faellt zuerst das weg, was doppelt vorhanden oder * reine Zierde ist - damit das Titelbild nicht zur Briefmarke wird: * - die Wellenform neben dem Bild ist Schmuck; * - die Kennzeichen (DVB-S2, Frequenz, Symbolrate ...) stehen daneben in * der Spalte "Senderinformation" noch einmal, im Querformat sichtbar. */ @media (max-height: 780px) { .rad-wrap .rad-player .rad-wave { display: none; } .rad-wrap .rad-player .rad-tags { display: none; } } /* ----------------------------------------------------------------- FIX345: DIE DETAILSPALTE DARF ROLLEN, WENN DER PLATZ NICHT REICHT. Bei den Radioseiten tut sie das schon (overflow-y: auto). Bei Live-TV nicht: dort steht in app-overlays.css ausdruecklich .ltv-details { overflow: hidden !important; } mit der Absicht aus FIX263, dass die Angaben stehenbleiben und nur die Liste "Danach" rollt. Am Schreibtisch ist das richtig - dort passen die Angaben immer. Auf einem Geraet mit knapper Hoehe passen sie nicht, und dann ist der untere Teil schlicht abgeschnitten. Hier rollt deshalb die ganze Spalte. Damit es nur EINEN Rollbereich gibt und nicht zwei ineinander, fliesst die "Danach"-Liste dabei mit, statt selbst zu rollen - zwei verschachtelte Rollbereiche sind mit dem Finger kaum zu treffen. Das "!important" ist hier noetig, weil die Regel drueben ebenfalls eines traegt; ohne gaebe es keinen Weg, sie geraetespezifisch zuruecknehmen. ----------------------------------------------------------------- */ .ltv-wrap .ltv-details { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ltv-wrap .ltv-details > .ltv-detail-section.ltv-danach { flex: none; min-height: 0; } .ltv-wrap .ltv-danach-liste { overflow-y: visible; flex: none; min-height: 0; } .rad-wrap .rad-details { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* * UKW hat statt des Titelbilds die Skala. Die ist "flex-shrink: 0" und * ihre Hoehe folgt der Breite (Bild mit height:auto) - sie kann sich also * nicht an eine knappe Hoehe anpassen und blieb als einzige Seite ueber. * Hier darf sie schrumpfen, das Bild wird ueber die Hoehe begrenzt und * behaelt dabei sein Seitenverhaeltnis. */ .rad-wrap .rad-player .rad-fm-dial { flex: 0 1 auto; min-height: 0; overflow: hidden; margin-bottom: clamp(6px, 1.6dvh, 24px); } .rad-wrap .rad-player .rad-fm-dial-face { min-height: 0; } .rad-wrap .rad-player .rad-fm-dial img { max-height: 100%; width: auto; max-width: 100%; margin: 0 auto; } } /* ----------------------------------------------------------------- FIX341: HOEHENMASSE AN DIE SICHTBARE HOEHE KOPPELN (vh -> dvh). Der ganze Radiospieler ist mit clamp(min, Xvh, max) gebaut: Titelbild, Messwerke, Tasten, Abstaende wachsen und schrumpfen mit der Fensterhoehe. Das ist genau richtig - nur ist "vh" in Safari die Hoehe OHNE Adress- und Tableiste. Auf dem iPad im Querformat rechnet die Seite also mit 834 px, waehrend real vielleicht 700 px zur Verfuegung stehen. Der Spieler bemisst sich damit rund zwanzig Prozent zu gross und passt nicht mehr in seine Karte - genau das war zu sehen. "dvh" ist die jeweils SICHTBARE Hoehe. Die Regeln unten sind Zeile fuer Zeile dieselben wie in app-overlays.css, nur mit dvh statt vh; Selektoren und Spezifitaet stimmen ueberein, diese Datei wird spaeter geladen und gewinnt daher. Am Rechner greift nichts davon (Medienabfrage oben). ----------------------------------------------------------------- */ .rad-wrap .rad-stations { width: clamp(180px, 17vw, 280px); padding: clamp(10px, 1.2dvh, 16px); } .rad-wrap .rad-details { width: clamp(200px, 19vw, 300px); padding: clamp(10px, 1.2dvh, 16px); } .rad-wrap .rad-player { min-width: 0; padding: clamp(10px, 1.6dvh, 20px) clamp(12px, 1.6vw, 24px); justify-content: center; gap: 0; } .rad-player .rad-player-head .name { font-size: clamp(15px, 2.1dvh, 22px); } .rad-player .rad-sub { font-size: clamp(11px, 1.3dvh, 13px); margin-bottom: clamp(6px, 1.4dvh, 20px); } .rad-player .rad-art-row { margin-bottom: clamp(6px, 1.4dvh, 18px); } .rad-player .rad-cover { width: clamp(96px, 24dvh, 300px); height: clamp(96px, 24dvh, 300px); } .rad-player .rad-tags { margin-bottom: clamp(6px, 1.2dvh, 18px); } .rad-player .net-nowplaying { padding: clamp(5px, 0.9dvh, 10px) 12px clamp(6px, 1dvh, 12px); margin: 0 0 clamp(4px, 0.8dvh, 6px); } .rad-player .net-nowplaying .np-station { font-size: clamp(13px, 1.7dvh, 17px); } .rad-player .net-nowplaying .np-detail { font-size: clamp(10px, 1.1dvh, 11px); } .rad-wrap .vu-panel.rad-vu-panel { gap: clamp(8px, 1.4vw, 20px); padding: clamp(8px, 1.2dvh, 14px) clamp(10px, 1.2vw, 16px) clamp(7px, 1dvh, 12px); margin-bottom: clamp(8px, 1.6dvh, 20px); } .rad-wrap .vu-meter.rad-vu-meter { width: clamp(96px, 21dvh, 280px); } .rad-player .rad-vu-meter .ch-label { font-size: clamp(12px, 1.7dvh, 16px); letter-spacing: .12em; } .rad-player .rad-controls { gap: clamp(10px, 1.8vw, 22px); margin-bottom: clamp(8px, 1.4dvh, 18px); } .rad-player .rad-controls button { width: clamp(32px, 5.2dvh, 52px); height: clamp(32px, 5.2dvh, 52px); } .rad-player .rad-controls button svg { width: clamp(14px, 2.1dvh, 21px); height: clamp(14px, 2.1dvh, 21px); } .rad-player .rad-controls button.primary { width: clamp(44px, 7dvh, 72px); height: clamp(44px, 7dvh, 72px); } .rad-player .rad-controls button.primary svg { width: clamp(17px, 2.6dvh, 26px); height: clamp(17px, 2.6dvh, 26px); } /* ----------------------------------------------------------------- 4. BIS 1100 px: die dreispaltigen Spieler brechen um. Betrifft iPad hoch (834) und iPhone quer (956). Auf dem iPad quer (1194) bleiben die drei Spalten stehen - dort passen sie. Die feste Mindestbreite (940 bzw. 1000 px) muss dabei weg, sonst entsteht waagerechtes Scrollen; und die feste Hoehenrechnung "100vh - 108px" passt nicht mehr, wenn die Spalten untereinander stehen. ----------------------------------------------------------------- */ @media (max-width: 1100px) { /* * ACHTUNG SPEZIFITAET: app-overlays.css setzt diese Masse ueber * ".page .rad-wrap" und ".rad-wrap .rad-stations" (zwei Klassen). Eine * Regel mit nur einer Klasse verliert dagegen, egal wie spaet sie kommt. * Deshalb stehen hier dieselben Selektorketten. */ .page .ltv-wrap, .page .rad-wrap { flex-direction: column; height: auto; min-height: 0; min-width: 0; width: 100%; align-items: stretch; } .ltv-wrap .ltv-col, .rad-wrap .rad-col { height: auto; width: auto; } .ltv-wrap .ltv-senders, .ltv-wrap .ltv-details, .rad-wrap .rad-stations, .rad-wrap .rad-details { width: auto; flex-shrink: 1; } .ltv-wrap .ltv-player, .rad-wrap .rad-player { min-width: 0; /* Der Spieler darf jetzt selbst rollen - er steht nicht mehr in einer Spalte fester Hoehe. */ overflow: visible; } /* * Und die Seite selbst muss rollen duerfen. app-overlays.css stellt die * Radioseiten ausdruecklich auf "overflow:hidden" ("Auf den Radio-Seiten * soll gar nichts rollen") - richtig, solange die drei Spalten * nebeneinander in eine Bildschirmhoehe passen. Untereinander tun sie das * nicht mehr; ohne diese Ruecknahme waere alles unterhalb des Spielers * unerreichbar. */ /* Der Spieler zuerst - deswegen ist man auf die Seite gegangen. Danach die Senderliste, die Einzelheiten zuletzt. */ .ltv-wrap .ltv-player, .rad-wrap .rad-player { order: 1; } .ltv-wrap .ltv-senders, .rad-wrap .rad-stations { order: 2; } .ltv-wrap .ltv-details, .rad-wrap .rad-details { order: 3; } /* Die Listen bekommen eine eigene Hoehe, damit sie nicht die ganze Seite lang werden. */ .ltv-wrap .ltv-list, .rad-wrap .ltv-list { max-height: 46vh; } /* Dreispalter der Such- und Verwaltungsseiten. */ .dvb-grid, .ik-dvb-layout { grid-template-columns: 1fr; } .dvb-grid > *, .ik-dvb-layout > * { grid-column: auto; } .epg-body, .rec-body { grid-template-columns: 1fr; } .row-3 { grid-template-columns: 1fr; } .row-2 { grid-template-columns: 1fr 1fr; } .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Feste Hoehenrechnungen, die von der Kopfleiste ausgingen. */ .epg-grid-wrap, .epg-detail { height: auto; max-height: 60vh; min-height: 0; } .epg-page { min-height: 0; } } /* ----------------------------------------------------------------- 5. BIS 700 px: Handy im Hochformat (440 px). Hier passt nichts mehr nebeneinander. Alles eine Spalte, Abstaende kleiner, Tabellen in eigene Scrollbereiche - die Seite selbst darf nicht waagerecht scrollen. ----------------------------------------------------------------- */ @media (max-width: 700px) { .content { padding-top: 16px; } .content h1 { font-size: 19px; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .row-2, .row-3 { grid-template-columns: 1fr; gap: 12px; } .ik-stat-grid, .ik-dvb-kpis, .rec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .epg-quellen, .rec-quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ik-guide-columns, .ik-ir-form-grid, .prf-page { grid-template-columns: 1fr; } .ik-media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .rec-liste.kacheln { grid-template-columns: 1fr; } /* Karten duerfen nicht breiter sein als der Bildschirm. */ .card, .stat-card, .ltv-col, .rad-col { min-width: 0; } /* Tabellen: nicht die Seite verbreitern, sondern selbst scrollen. */ .dvb-table-wrap, .ik-dvb-table-wrap, .dsc-tabelle-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tuner { min-width: 560px; } .ltv-wrap .ltv-list, .rad-wrap .ltv-list { max-height: 40vh; } /* Der Spielerkopf bricht um, statt den Namen abzuschneiden. */ .rad-player .rad-player-head { flex-wrap: wrap; justify-content: center; } .rad-player .rad-player-head .name { font-size: 18px; } .rad-wrap .rad-player { padding: 14px 14px; } /* Die Wellenform links und rechts des Titelbilds ist auf einen Anteil der SPIELERBREITE gerechnet (27 %) und ragt bei 440 px ueber beide Raender hinaus. Sie ist reine Zierde - auf dem Handy faellt sie weg. */ .rad-wrap .rad-player .rad-wave { display: none; } /* * MESSWERKE IM HOCHFORMAT. * * Die Zeile ist als Dreispalter fuer 930 px gebaut: links ein Einzelmesser * (Signal), in der Mitte das gemeinsame Gehaeuse mit L und R, rechts der * zweite Einzelmesser (Qualitaet). Einfach untereinander gestellt wird * jedes Gehaeuse 408 px breit - die Zeile wuchs damit auf 677 px Hoehe, * und die Qualitaetsanzeige rutschte so weit nach unten, dass sie beim * Blaettern gar nicht mehr auffiel ("die Qualitaet fehlt"). * * Jetzt zwei Zeilen: oben das VU-Gehaeuse ueber die volle Breite, darunter * Signal und Qualitaet nebeneinander. Ergibt 302 statt 677 px, und alle * vier Messwerke sind auf einen Blick da. */ .fm-meter-row { display: grid; grid-template-columns: 1fr 1fr; max-width: none; gap: 10px; column-gap: 10px; } .fm-meter-row > .rad-vu-panel { grid-column: 1 / -1; order: 1; } .fm-meter-row > .fm-aux-meter { order: 2; } } /* ----------------------------------------------------------------- 6. FLACHE ANSICHT (Hoehe bis 560 px): Handy im Querformat. 956 x 440 - die Breite ist kein Problem, die HOEHE ist es. Von 440 px bleiben nach Safaris Leisten noch gut 390. Kopfleiste und Abstaende schrumpfen, und was nur Schmuck ist, faellt weg. Diese Regeln gelten unabhaengig von der Breite; sie greifen auch auf dem iPad, wenn es in einer flachen Splitscreen-Ansicht laeuft. ----------------------------------------------------------------- */ @media (max-height: 560px) { .topbar { padding-top: max(6px, var(--sicher-oben)); padding-bottom: 6px; } .content { padding-top: 12px; padding-bottom: 20px; } .content-head { margin-bottom: 12px; } .logo { padding-top: 8px; padding-bottom: 8px; } .nav-item { padding-top: 8px; padding-bottom: 8px; } /* Die Wellenform des Radiospielers ist Schmuck - die Zeiger nicht. */ .rad-wrap .rad-player .rad-wave { display: none; } .rad-sat-badge { margin-bottom: 8px; } .ltv-wrap .ltv-list, .rad-wrap .ltv-list { max-height: 30vh; } } } /* =================================================================== FIX544 - iPhone-App vom Home-Bildschirm: Luecke unter der Dynamic Island. js/ios-insel.js setzt html.ik-ios-app (nur navigator.standalone) und misst: --ik-insel Luecke oben, solange iOS die Seite UNTER die Insel legt (sonst 0) --ik-hoehe nutzbare Hoehe = Fenster JETZT minus Luecke Damit richten sich Kopfleiste, Inhalt und Seitenleiste nach dem Fenster, das gerade wirklich da ist - statt nach 100dvh, das nach dem Verschieben unter die Insel stehen blieb (VU-Meter unten abgeschnitten). Ohne die Klasse (Browser, Rechner, Android, Fernseher) gilt alles unveraendert. =================================================================== */ html.ik-ios-app body { height: calc(var(--ik-hoehe, 100dvh) + var(--ik-insel, 0px)); padding-top: var(--ik-insel, 0px); } html.ik-ios-app .sidebar { top: var(--ik-insel, 0px); height: var(--ik-hoehe, 100dvh); } html.ik-ios-app .main-scroll { height: var(--ik-hoehe, 100dvh); } /* =================================================================== FIX559 - IPHONE: DURCHSICHT ALLER SEITEN BEI 375 PX. Gemessen mit tests/browser/iphone-seiten-fix559.test.cjs (Chromium als iPhone: 375 x 759, Touch, Beispieldaten), dazu Bildschirmfotos jeder Seite. Was dabei ueber den Rand ging oder abgeschnitten war: Dashboard Tuner- und Transcoding-Tabelle breiter als die Karte (560 px) Live-TV Bedienleiste: Zeitversatz und Vollbild rechts ausserhalb Aufnahmen Statusreiter ("Abgeschlossen") abgeschnitten; Karten: 190 px Vorschaubild, fuer den Titel blieben 63 px TV-Guide Hauptspalte 533 px breit (Raster "1fr" = mindestens so breit wie der breiteste Inhalt), Reiter "Kinder" draussen Benutzer vier Kennzahlen nebeneinander, Detailkarte fest 600 px, Tabelle 743 px Update Ablagefeld: Text in schmaler Spalte neben dem Knopf Internet-Radio (Einstellungen) Sendertabelle breiter als die Karte Tabellen scrollen jetzt in sich (waagerecht), alles andere bricht um. Nur Beruehrungsgeraete bis 700 px - Rechner und Fernseher unveraendert. =================================================================== */ @media (pointer: coarse) and (max-width: 700px) { /* Breite Tabellen: die umgebende Karte scrollt waagerecht, die Tabelle behaelt ihre Spalten (display:block an der Tabelle selbst liess die Kopfzeile zusammenfallen - gemessen, Bildschirmfoto). */ #card-tuner, .card:has(> table.transcode), .usr-table-card, .ik-panel:has(> table.ik-ir-table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } table.tuner, table.transcode { min-width: 560px; } table.usr-table { min-width: 520px; } table.ik-ir-table { min-width: 560px; } /* Live-TV: Bedienleiste bricht um; der Regler wird schmaler. */ .ltv-controls { flex-wrap: wrap; row-gap: 8px; } .ltv-controls .ltv-vol-slider { width: 84px; } /* Aufnahmen: Statusreiter waagerecht wischbar, Karten mit kleinem Bild. */ .rec-status-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rec-status-tabs::-webkit-scrollbar { display: none; } .rec-tab { white-space: nowrap; flex: none; padding-left: 12px; padding-right: 12px; } .rec-body { grid-template-columns: minmax(0, 1fr); } .rec-card .rec-thumb, .rec-liste.liste .rec-thumb { width: 96px; } .rec-card > :not(.rec-thumb) { min-width: 0; } .rec-card-titel { overflow-wrap: anywhere; } /* TV-Guide: eine Spalte, die NICHT breiter werden darf als der Schirm. */ .tg-body { grid-template-columns: minmax(0, 1fr); } .tg-main, .tg-side, .tg-side > *, .tg-hero, .tg-hero-inhalt { min-width: 0; } .page .tg-side { grid-template-columns: minmax(0, 1fr); } .tg-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tg-tabs::-webkit-scrollbar { display: none; } .tg-tab { white-space: nowrap; flex: none; } .tg-hero-inhalt { padding: 20px 18px; max-width: none; } /* Benutzer: Kennzahlen 2 x 2, Liste und Details untereinander. */ .usr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .usr-body { flex-direction: column; align-items: stretch; } .usr-detail-card { width: auto; max-width: 100%; min-width: 0; padding: 16px; } .usr-table-card { width: 100%; } .usr-detail-cols { flex-direction: column; align-items: stretch; } .usr-actions-col { width: auto; } /* Aufnahmen: Fusszeile (Speicher, naechste Aufnahme) darf umbrechen. */ .rec-foot { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 6px; padding: 10px 14px; } /* Kleine iPhones (320 px): Kopf der Aufnahmen bricht um, Reiter der Benutzerdetails sind wischbar. */ .rec-head { flex-wrap: wrap; } .usr-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .usr-tabs::-webkit-scrollbar { display: none; } .usr-tabs > * { white-space: nowrap; flex: none; } /* Update: Ablagefeld untereinander statt Text neben dem Knopf. */ .upd-drop { flex-direction: column; align-items: stretch; text-align: left; } .upd-drop .upd-btn { width: 100%; } } /* FIX559: iPhone quer (812-932 px) - die Benutzerdetails sind fest 600 px breit und liessen der Benutzerliste daneben nur 162 px. Bis 1100 px untereinander. */ @media (pointer: coarse) and (max-width: 1100px) { .usr-body { flex-direction: column; align-items: stretch; } .usr-detail-card { width: auto; max-width: 100%; min-width: 0; } .usr-table-card { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* =================================================================== FIX561 - IPHONE: RADIO-SPIELER FUELLEN DEN BILDSCHIRM UND ENDEN ALLE GENAU AM UNTEREN RAND (Abstand wie links/rechts, 16 px). js/player-hoehe.js setzt --ik-player-h = Platz vom oberen Spielerrand bis zum unteren Bildschirmrand. Aufbau wie Entwurf "B" (mittig, wie gewohnt): DAB+ / Satellit / Internet: das Senderlogo nimmt den uebrigen Platz (hoechstens 240 px, mindestens 96 px), alles andere hat seine Groesse. UKW: Fenster gestaucht (kleines Logo neben der Frequenz, RDS zweispaltig, Radiotext eine Zeile); der uebrige Platz verteilt sich gleichmaessig zwischen Fenster, Skala, Messwerken, Knoepfen und Lautstaerke. Reicht der Platz nicht, waechst der Spieler (Mindesthoehe, keine feste Hoehe). =================================================================== */ @media (pointer: coarse) and (max-width: 700px) { .page .rad-wrap .rad-player { box-sizing: border-box; min-height: var(--ik-player-h, auto); display: flex; flex-direction: column; gap: 0; } /* --- DAB+ / Satellit / Internet --- */ .page .rad-wrap .rad-player:not(.rad-fm-player) { padding: 12px 14px; justify-content: flex-start; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-badge-row { margin-bottom: 6px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-player-head { margin: 0; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-sub { margin: 0 0 8px; } /* Die Bildreihe schluckt den Rest; das Logo richtet sich per Container- Einheiten nach ihr (quadratisch, hoechstens 240 px). height:100% ging nicht - der Spieler hat nur eine MINDESThoehe, 100 % blieb unbestimmt und das Logo fiel auf seine Schrifthoehe (36 px) zusammen (gemessen). */ .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-art-row { flex: 1 1 0; min-height: 96px; margin: 0 0 8px; container-type: size; display: flex; align-items: center; justify-content: center; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-art-row .rad-cover { width: min(100cqh, 100cqw, 240px); height: min(100cqh, 100cqw, 240px); max-width: none; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 14px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-tags { margin: 0 0 6px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .net-nowplaying { padding: 6px 0; margin: 0 0 8px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .fm-meter-row { margin: 0 0 10px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-controls { margin: 0 0 6px; } .page .rad-wrap .rad-player:not(.rad-fm-player) .rad-volume-row { margin: 0 auto; } /* --- UKW --- */ #page-radio-ukw .rad-wrap .rad-fm-player { padding: 10px 12px; justify-content: space-between; } #page-radio-ukw .rad-fm-player > * { margin-top: 0; margin-bottom: 6px; } #page-radio-ukw .rad-fm-player > .rad-volume-row { margin-bottom: 0; } #page-radio-ukw .rad-fm-meta-row { grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "logo mitte" "rds rds" "rt rt"; column-gap: 10px; row-gap: 6px; padding: 10px 12px; } #page-radio-ukw .rad-fm-logo-box { width: 60px; height: 60px; align-self: center; } #page-radio-ukw .rad-fm-center .rad-fm-title { margin-bottom: 2px; transform: scale(.85); } #page-radio-ukw .rad-fm-center .rad-fm-freq-row { margin-bottom: 0; gap: 6px; } #page-radio-ukw .rad-fm-center .rad-fm-freq .num { font-size: 38px; } #page-radio-ukw .rad-fm-tune { width: 30px; height: 30px; } #page-radio-ukw .rad-fm-name .name { font-size: 15px; } #page-radio-ukw .rad-fm-rds-box { padding-top: 6px; } #page-radio-ukw .rad-fm-rds-title { margin-bottom: 2px; font-size: 11px; } /* FIX563: drei Zeilen untereinander - Programm, Empfang, Verkehr (Wunsch Daniel). Zweispaltig (Bezeichnung | Wert), damit "Stereo · Pilot · RDS 100 %" in eine Zeile passt (FIX562: in einer schmalen Spalte brach es dreizeilig um). */ #page-radio-ukw .rad-fm-rds-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 0; font-size: 12px; } #page-radio-ukw .rad-fm-name .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } #page-radio-ukw .rad-fm-rt-zeile { padding-top: 6px; } #page-radio-ukw .rad-fm-rt-kopf { font-size: 10px; margin-bottom: 0; } #page-radio-ukw .rad-fm-rt-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-radio-ukw .rad-fm-dial { padding: 5px 10px; } }