selbst in display:block (das würde
thead/tbody-Layout mancher Seiten zerlegen). Stattdessen bekommen die
bekannten Bootstrap-/App-Tabellen-Container horizontales Scrollen. */
.table-responsive,
.pm-table-wrap,
.card .table,
.pm-card .table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Fallback: jede „nackte" .table ohne scrollbaren Wrapper darf trotzdem
nicht die Seite sprengen — sie scrollt in sich selbst. Nur Mobile. */
table.table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
width: max-content;
}
/* Häufige Overflow-Verursacher zähmen: sehr breite , lange Codes/URLs. */
pre, code {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
img, svg, canvas, video, iframe { max-width: 100%; }
/* Bootstrap-Row-Gutter erzeugt sonst horizontalen Overflow am Viewport-Rand. */
.container-fluid, .container { padding-left: 12px; padding-right: 12px; }
}
/* Querformat-Labor 09.09.2026: echtes iPhone quer misst 852px Breite --
ausserhalb der 480px-Deckelung oben, darum eigener Block, sonst bleibt
.pm-main links/rechts ungepolstert und der Inhalt startet unter der
Insel/dem rechten Rand (gemessen: 55 Kollisionen auf /news). */
@media (orientation: landscape) and (max-height: 500px) {
.pm-main {
padding-left: max(0.6rem, var(--pm-safe-left));
padding-right: max(0.6rem, var(--pm-safe-right));
}
}
/* ── 2) Kompaktere globale Paddings/Font — mehr passt auf den iPhone-Schirm ──
Bewusst dezent; NUR ≤ 480px, damit Tablet/Desktop unangetastet bleiben. */
@media (max-width: 480px) {
.pm-card, .card { padding: 0.7rem 0.8rem; }
.card-body { padding: 0.7rem 0.8rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.02rem; }
h5 { font-size: 0.95rem; }
/* Modals randlos-freundlich: nutzen fast die volle Breite, kein Clipping. */
.modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); }
.modal-body { padding: 0.9rem; }
/* Bootstrap-Buttons/Inputs bequem antippbar (Touch-Target). */
.btn { touch-action: manipulation; }
}
/* ── 3) Mobile Top-Bar (< lg): darf nie clippen ──
Icons/Buttons rechts (Refresh, Hilfe-Glühbirne, Alert-Bell) sollen
umbrechen/scrollen statt abgeschnitten zu werden. Gilt für die
d-lg-none Top-Bar. */
@media (max-width: 991.98px) {
/* iPhone-Huelle-Welle (08.09.2026): Masse/Optik 1:1 von PMS' #topbar
uebernommen (pms/sonos-bridge/templates/index.html:525-533, NUR
gelesen) — Padding 10px 16px + Safe-Area oben, blur+saettigender
Hintergrund, 1px Trennlinie unten. Farbe kommt aus Leo-Tokens
(--pm-panel-rgb/--pm-border), NICHT aus PMS' Hexwerten (#0d0d0d). Der
Hintergrund ist scoped auf ".d-lg-none" (NUR die mobile Leiste) — die
Desktop-Kopfzeile behaelt ihren eigenen Verlauf (portfo-leo-skin.css). */
.pm-navbar.d-lg-none {
flex-wrap: wrap;
row-gap: 4px;
/* Hoehen-Riegel (11.09.2026, GEMESSEN): style.css:661 setzt global
".pm-navbar { height: 54px }" — ein Rest der alten waagrechten
Desktop-Leiste, die es seit dem Menue-Umbau (19.08.2026) gar nicht
mehr gibt (--pm-navbar-h ist ab 992px 0px). Am Handy traf diese 54px
auf padding-top:69px (10 + --pm-safe-top 59) bei box-sizing:border-box:
die Box klemmte auf 80px (79px Polster + 1px Linie, Inhaltshoehe 0),
waehrend die Kinder 69..113px hoch stehen. Messung:
box {top:0, bottom:80} clientHeight 79 scrollHeight 113
Kind A (Logo/Marke) top 69 bottom 113
Kind B (Glocke) top 69 bottom 113
Folge: Logo und Glocke haengen 33px UNTER dem eigenen Hintergrund und
liegen ueber dem Seiteninhalt — auf /positions ueberdeckte der
Schriftzug schon bei scrollY=0 die erste Karte. PMS setzt hier gar
keine Hoehe (Spec B: "HOEHE NICHT GESETZT — inhaltsgetrieben"), also
hier zurueck auf auto. Zwei Klassen schlagen die eine in style.css,
unabhaengig von der Ladereihenfolge. */
height: auto;
flex-shrink: 0;
padding: 10px 16px;
padding-top: calc(10px + var(--pm-safe-top));
/* Querformat-Labor 09.09.2026: --pm-safe-left/right statt env() direkt,
damit auch der simulierte Wert im Preview greift (env() liefert
headless nie etwas, siehe --pm-safe-top/bottom oben). */
padding-left: max(16px, var(--pm-safe-left));
padding-right: max(16px, var(--pm-safe-right));
background: rgba(var(--pm-panel-rgb), .92) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--pm-border);
}
/* Falls die rechte Icon-Gruppe doch mal breiter wird: horizontal scrollen
statt clippen. */
.pm-navbar.d-lg-none .ms-auto {
flex-shrink: 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Touch-Targets ≥ 44px für die Icon-Buttons in der Mobile-Top-Bar. */
.pm-navbar.d-lg-none .btn,
.pm-navbar.d-lg-none [onclick] {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ── 4) Mobile-Menü + Bottom-Tabs: Touch-Targets & Safe-Area ──
mob-menu-link ist bereits ≥ 52px (style.css). Hier die Bottom-Tab-Bar
und die Menü-Kopfzeile gegen Notch/Home-Indicator absichern. */
@media (max-width: 991.98px) {
/* Menü-Kopf unter der Notch, Menü-Fuss über dem Home-Indicator. */
/* Bottom-Tab-Buttons: sicheres 44px-Touch-Target. */
.mob-tab { min-height: 44px; }
/* Menü-Link-Text darf nie überlaufen. */
.mob-menu-link {
min-height: 48px;
overflow: hidden;
text-overflow: ellipsis;
}
}