/* ============================================================ * mobile-2026.css — Mobile-Kompaktierung (≤600 px) * ============================================================ * Alle Layout-Regeln sind in @media (max-width: 600px) gekapselt. * Auf Tablets/Desktop feuert nichts — design2026.min.css bleibt * der alleinige Stil-Geber. * * AUSNAHMEN (kein Media-Gate): Elemente, die vom PHP zwar immer * gerendert werden, aber NUR auf Mobile sichtbar sein dürfen * (z.B. der zweite Hamburger für Firmenauswahl). * * Gliederung: * §1 Globale Kompaktierung * §2 Muster A — Artikel-Karten (hn-grid-main) * §3 Muster B — Tabellen (Kurse/Indices/RT/Rankings) * §4 Muster C — showcompany + Kurs-Bar + Tabs * §5 Muster D — Raster-Übersichten * §6 Muster E — Wissen/Lexikon (Long-Form) * §7 Muster F — Forum * §8 Muster G — News-Detail (shownews.html) * §9 Drawer-Menü (ersetzt inline submenu) * §10 Company-Picker Bottom-Sheet * ============================================================ */ /* Default-Hide für Mobile-only-Elemente außerhalb der Media-Query. Auf Desktop sind sie nie sichtbar. Im Media-Block unten werden sie für ≤600 px explizit wieder angezeigt. */ .header-toggle-right { display: none; } #bottom-tab-bar { display: none; } /* prefers-reduced-motion — alle Transitions der Stufe-1-Elemente auf praktisch null setzen. Respekt für User mit Bewegungs- Empfindlichkeit (iOS Reduce Motion, macOS Accessibility). */ @media (prefers-reduced-motion: reduce) { #menu-drawer, #menu-drawer-scrim, #company-picker-sheet, #company-picker-scrim, #bottom-tab-bar .bt-tab, .d-section, .d-section > button::after, .d-sublist, .header-toggle-right, #menu-toggle { transition: none !important; animation: none !important; } } /* (Sticky-Regeln sind in §11 konsolidiert — alter Block entfernt, um Konflikt mit L 978+ zu vermeiden.) */ @media (max-width: 600px) { /* §1 — GLOBALE KOMPAKTIERUNG ================================== */ html, body { /* `clip` statt `hidden` — verhindert Horizontal-Overflow OHNE sticky-Positioning an descendant-Elementen zu zerstören. Chrome 90+, Firefox 111+, Safari 16+. */ overflow-x: clip; overflow-y: visible; } .content { padding: 0; gap: 0; } .content-inner { padding: 8px 8px 0; max-width: 100%; flex: 1 1 auto; } .sc-outer-layout { display: flex; flex-direction: column; gap: 0; max-width: 100%; } .sc-main { flex: 1 1 auto; width: 100%; min-width: 0; } /* Globale rechte Werbung-Sidebar wird auf Mobile ausgeblendet — banner_middle ist inline bereits im Content eingebunden */ #right_ad { display: none; } ol, ul { padding: 0 0 0 18px; } h1 { font-size: 20px; margin: 6px 0 8px; } h2 { font-size: 17px; margin: 14px 0 6px; } h3 { font-size: 15px; margin: 10px 0 4px; } .breadcrumb { font-size: 11px; padding: 4px 8px; margin: 4px 0; } .breadcrumb a { color: var(--text-sec); } .breadcrumb span:last-of-type, .breadcrumb a:last-of-type { font-weight: 600; color: var(--text-primary); } /* Kompakte data-table-Zellen */ table.data-table th, table.data-table td { padding: 4px 6px; font-size: 13px; } /* Sort-Arrows: design2026 positioniert sie absolut + 18px groß. Bei 2-zeiligen Spaltenköpfen (z.B. "Börse / Kurse") überlappt der Pfeil beide Textzeilen. Fix: position auf static → Pfeil erscheint inline nach dem Text, winzig und leicht transparent. */ /* design2026 hat `th.sortable { position: relative }` (0,1,1) und `th.sortable .sort-arrow { position: absolute }` (0,2,1). Gleich-spezifische-Regeln → spätere Deklaration gewinnt. Mobile-2026.css wird nach design2026.min.css geladen → wir gewinnen. */ th.sortable { position: static; padding-right: 4px; } th.sortable .sort-arrow { position: static; display: inline; font-size: 9px; line-height: 1; vertical-align: middle; opacity: 0.55; margin-left: 2px; transform: none; right: auto; top: auto; bottom: auto; } /* §2 — MUSTER A · ARTIKEL-KARTEN (hn-grid-main) =============== */ /* .page-news container (uebersicht_news_...) zwingen volle Breite */ .page-news-outer, .page-news { display: block; width: 100%; max-width: 100%; padding: 0; grid-template-columns: 1fr; } .page-news .left_news, .page-news .right_news { width: 100%; max-width: 100%; min-width: 0; float: none; } .page-news table { width: 100%; max-width: 100%; table-layout: fixed; } .hn-grid-main { grid-template-columns: 1fr; gap: 8px; padding: 0; } .hn-grid-main > div:not(.dottedline) { border-radius: 6px; min-height: 0; } .hn-grid-main .news-thumb-link { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; } .hn-grid-main .news-thumb { width: 100%; height: 100%; object-fit: cover; float: none; margin: 0; border-radius: 0; } .hn-grid-main a.large-1 h3 { font-size: 14px; line-height: 1.3; margin: 4px 0; } .hn-grid-main font.small-3 { font-size: 11px; } .hn-grid-main .news-meta-source { font-size: 10px; padding: 2px 6px; } .hn-grid-main > div:not(.dottedline) > div[style*="line-height"] { padding: 8px 10px; } .hn-grid-main .news-empfehlung { font-size: 11px; padding: 2px 6px; } /* Pagination news-nav — kompakt */ .hn-grid-main > nav.news-nav, nav.news-nav { padding: 10px 12px; margin: 16px 0; gap: 10px; } nav.news-nav .news-nav-btn { width: 36px; height: 36px; } /* §3 — MUSTER B · TABELLEN (Kurse, RT, Indices, Rankings) ===== */ /* Top-flop-Grid (kurse.html) einspaltig */ .topflop-grid { flex-direction: column; gap: 10px; } /* Kursliste-Seiten (/prime/…/Kurse-aktuell/, /standard/…, /direct/… etc.) */ .page-kursliste { padding: 0; max-width: 100%; } .page-kursliste .kursliste-card, .page-kursliste .kursliste-wrap { padding: 8px; width: 100%; max-width: 100%; box-sizing: border-box; flex-direction: column; } .page-kursliste .kursliste-card > div, .page-kursliste .kursliste-card > table { max-width: 100%; width: 100%; min-width: 0; } .page-kursliste table { max-width: 100%; width: 100%; table-layout: fixed; font-size: 12px; } .page-kursliste table td, .page-kursliste table th { padding: 3px 4px; } /* Nur Stock-Namen-Zellen dürfen umbrechen (sonst zerschneidet es H1/Titel des Header-Widgets buchstabenweise) */ .page-kursliste tr > td.kursliste, .page-kursliste tr > th.kursliste_ueberschrift0 { overflow-wrap: anywhere; } /* H1 im Header-Widget ("BÖRSE WIEN AKTUELL: …") darf NIE buchstabenweise umbrechen */ .page-kursliste h1, .page-kursliste .text_13 h1 { word-break: normal; overflow-wrap: break-word; font-size: 16px; line-height: 1.2; margin: 0; } /* Header-Widget (Titel + Top3/Flop3/ATX-Buttons) untereinander stapeln, damit der Titel die volle Breite hat */ .page-kursliste .text_13 { flex-direction: column; align-items: stretch; gap: 8px; } /* Spalten-Reduktion wie im alten /m/-Layout: Name | Kurs | % (nur 3 Spalten). Echte Kursliste-Struktur (11 Spalten): 1=Name, 2=Börse-Kurs, 3=+/-, 4=Merken★, 5=außer-börslich/RT, 6=Bid, 7=Ask, 8=Vortag, 9=Hoch, 10=Tief, 11=Umsatz Wir scopen auf Stock-Rows (erkennbar an `td.kursliste_text`) bzw. Header (erkennbar an `th.kursliste_ueberschrift0`), damit die Top-3/Flop-3/ATX- Summary-Widget-Zeile oben nicht zerstört wird. */ .page-kursliste tr:has(> td.kursliste_text) > td:nth-child(n+4), .page-kursliste tr:has(> th.kursliste_ueberschrift0) > th:nth-child(n+4) { display: none; } .page-kursliste tr:has(> td.kursliste_text) > td:nth-child(3), .page-kursliste tr:has(> th.kursliste_ueberschrift0) > th:nth-child(3) { display: table-cell; } /* Spaltenbreiten für 3-Spalten-Kompaktlayout */ .page-kursliste tr:has(> td.kursliste_text) > td:nth-child(1), .page-kursliste tr:has(> th.kursliste_ueberschrift0) > th:nth-child(1) { width: auto; text-align: left; } .page-kursliste tr:has(> td.kursliste_text) > td:nth-child(2), .page-kursliste tr:has(> th.kursliste_ueberschrift0) > th:nth-child(2) { width: 80px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .page-kursliste tr:has(> td.kursliste_text) > td:nth-child(3), .page-kursliste tr:has(> th.kursliste_ueberschrift0) > th:nth-child(3) { width: 72px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 8px; } /* Mini-Chart im Namen-TD (td.kursliste hat nested chart-Zelle) ausblenden – auf 393 px gibt es keinen Platz für Inline-Sparkline */ .page-kursliste tr > td.kursliste .mini-chart, .page-kursliste tr > td.kursliste a[href*="easychart"] img { display: none; } /* Namen-Spalte: Firmenname und Datum/Zeit kompakt; Suffix (★/Zeit/Datum) klein */ .page-kursliste tr > td.kursliste { font-size: 13px; line-height: 1.25; } .page-kursliste tr > td.kursliste i, .page-kursliste tr > td.kursliste font.small-1, .page-kursliste tr > td.kursliste font[size="1"] { font-size: 10px; color: #999; } /* Grosse Legacy-Kurslisten-Tabellen */ table.top_flop, table[class*="kurs"], table.data-table { width: 100%; table-layout: fixed; } table.top_flop td, table[class*="kurs"] td, table.data-table td { padding: 3px 5px; font-size: 13px; word-break: break-word; overflow-wrap: anywhere; } /* Sticky Tabellen-Header für lange Listen */ table.top_flop thead th, table[class*="kurs"] thead th, table.data-table thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 2; padding: 4px 5px; font-size: 12px; } /* Moderate Spalten-Ausblendung: Name | Kurs | Änderung% | Hoch/Tief bleiben sichtbar. Volumen, Datum, Zeit, Bid/Ask, Umsatz ausblenden. */ table.top_flop .col-volume, table.top_flop .col-umsatz, table.top_flop .col-datum, table.top_flop .col-zeit, table.top_flop .col-bid, table.top_flop .col-ask, table.top_flop td.volume, table.top_flop td.umsatz, table.top_flop td.datum, table.top_flop td.zeit { display: none; } /* Fallback für Legacy-Tabellen ohne Klassen: via nth-child werden Spalten 5+ ausgeblendet, wenn mehr als 5 Spalten da sind. ABER: schützen wir wichtige Tabellen mit weniger Spalten mit :has(). */ body:not(.no-col-collapse) table[class*="kurs"]:has(th:nth-child(6)) th:nth-child(n+7), body:not(.no-col-collapse) table[class*="kurs"]:has(th:nth-child(6)) td:nth-child(n+7) { display: none; } /* §4 — MUSTER C · showcompany + Kurs-Bar + Tabs ============== */ /* Kennzahlen-Nav Sidebar auf Mobile komplett ausblenden (Inhalt ist über den Company-Picker rechts im Header erreichbar) */ .sc-sidebar { display: none; } /* showcompany sub=forum: .sc-forum-grid ist ein flex-Container. .sc-forum-sidebar (flex-item) hat min-width das den Container auf 472px treibt. Fix: sc-forum-grid auf block stellen, sidebar auf volle Breite. */ .sc-forum-grid { display: block; } .sc-forum-main, .sc-forum-sidebar { width: 100%; min-width: 0; max-width: 100%; } /* news-media-grid: design2026 setzt 1fr per @media(max-width:960px), aber grid-item min-content zwingt den Track auf ~738px (CSS-Grid-Bug). Fix: min-width:0 auf alle direkten Grid-Kinder bricht das auf 1fr=346px. Quelle: https://css-tricks.com/preventing-a-grid-blowout/ */ .news-media-grid { grid-template-columns: 1fr; min-width: 0; } .news-media-grid > * { min-width: 0; max-width: 100%; overflow-x: hidden; } /* design2026 @media≤640px: `div.submenu a { display:inline-block; white-space:nowrap }` — Spezifität (0,1,2). Alle unsere Overrides brauchen ≥ (0,1,2), daher `div.X a`-Selektoren. `.sc-main a.large-1` = (0,2,1) > (0,1,2) ✓ Mobile-2026 nach design2026 in Quelle → gleiche Spez. = mobile-2026 gewinnt. */ div.news-item-headline a, div.news-media-grid .news-item-headline a, /* a.large-1 = news-/media-/analysen-Headline in showcompany content */ .sc-main a.large-1, .sc-main a.large-1.qforum { display: inline; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } /* Analyst-Dashboard + Media-Monitoring-Cards: innere Block-DIVs haben overflow:hidden und whitespace:nowrap → Inhalt wird geclippt. Fix: word-break + overflow-wrap erzwingt Zeilenumbruch statt Clip. */ .analyst-dashboard, .analyst-panel { min-width: 0; max-width: 100%; width: 100%; } .analyst-panel, .mw-card-head, .mw-cards > * { overflow-x: hidden; word-break: break-word; overflow-wrap: anywhere; } .mw-name-col a, .analyst-panel-title, .al-val { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Sub-Tabs horizontal scrollbar */ ul.tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 0; margin: 6px -8px 8px; /* Rand-zu-Rand bis Viewport */ } ul.tabs::-webkit-scrollbar { display: none; } ul.tabs li { white-space: nowrap; flex-shrink: 0; } ul.tabs li a, ul.tabs li b { padding: 6px 10px; font-size: 13px; } /* Kurs-Bar sticky oben (im Content-Flow, nicht über Header!) flex-wrap: wrap verhindert den 828px-Overflow bei nowrap — 10 Items à ~85px total ~850px → wrappen auf 2 Zeilen ≤ 393px. Sekundäre Items (bid/ask, Inline-Charts, Meta-Zeit) auf Mobile ausblenden; verbleiben: Kurs, Änderung, Intraday-Link, H/T, Vortag, Umsatz. */ .kurs-bar { position: sticky; top: 0; z-index: 5; padding: 5px 8px; font-size: 12px; gap: 6px 8px; margin: 0 -8px 8px; border-radius: 0; flex-wrap: wrap; overflow-x: hidden; } .kurs-bar-value { font-size: 18px; } .kurs-bar-ht { font-size: 10px; gap: 0 4px; } /* Bid/Ask (129px), Inline-Charts, Meta-Timestamp auf Mobile ausblenden */ .kurs-bar-bidask, .kurs-bar-chart-item, .kurs-bar-meta { display: none; } /* §5 — MUSTER D · RASTER-ÜBERSICHTEN ========================= */ .page-unternehmen .unternehmen-grid, .page-broker .broker-grid, .page-boerseplaetze .boerse-grid, [class*="page-"] .cards { grid-template-columns: 1fr; gap: 8px; } /* Lage der Nation (lage_der_nation.php) — ldn-grid ist bis 5-spaltig */ .ldn-section, [class*="ldn-grid"] { display: block; grid-template-columns: 1fr; padding: 0; width: 100%; max-width: 100%; overflow-x: auto; } .ldn-section > *, [class*="ldn-grid"] > * { width: 100%; min-width: 0; margin-bottom: 8px; } /* §6 — MUSTER E · WISSEN / LEXIKON ============================ */ /* Lexikon: 3-Spalten-Tabelle (TD.news je Buchstabe A–Z) auf Mobile einspaltig stapeln — sonst 483px Overflow bei 393px Viewport. display:block auf table/tbody/tr/td-Kette erzwingt vertikales Stacking ohne Table-Semantik zu zerstören (Screen-Reader liest trotzdem als Liste von Links). */ .page-lexikon .card table, .page-lexikon .card table tbody, .page-lexikon .card table tr { display: block; width: 100%; } .page-lexikon .card table td.news { display: block; width: 100%; box-sizing: border-box; padding: 4px 0; } .page-wissen p, .page-lexikon p, .page-indikatoren p, .page-kennzahlen p, .page-candlesticks p, .page-literatur p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; } .page-wissen img, .page-lexikon img, .page-indikatoren img, .page-kennzahlen img, .page-candlesticks img, .page-literatur img { max-width: 100%; height: auto; } /* DSGVO / Impressum / AGB — Datenschutz-Seiten enthalten lange Cookie- Werte (z.B. "1564498958.1564498958.1564498958.1") und Google-URLs ohne Trennmöglichkeit. overflow-wrap:anywhere + word-break:break-word erzwingt Umbruch statt Clip (sonst: card 654px bei 328px Viewport). Gilt auch für Impressum und AGB mit ähnlichem Inhalt. */ .page-dsgvo .card, .page-impressum .card, .page-agb .card { overflow-x: hidden; word-break: break-word; overflow-wrap: anywhere; } .page-dsgvo p, .page-dsgvo li, .page-dsgvo td, .page-impressum p, .page-agb p { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .page-dsgvo pre, .page-dsgvo code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; } /* §7 — MUSTER F · FORUM ======================================= */ .page-forum-uebersicht { grid-template-columns: 1fr; padding: 0; gap: 10px; } .forum-item { padding: 6px 8px; } .forum-tag { flex-direction: column; align-items: flex-start; gap: 2px; } .forum-user { font-size: 11px; } /* design2026 @media≤640px: `div.submenu a { display:inline-block; white-space:nowrap }` Spezifität (0,1,2). Unsere Selektoren brauchen gleiche oder höhere Spezifität. `div.forum-title a` = (0,1,2). */ div.forum-title a, div.forum-title a.item.qforum { font-size: 14px; display: inline; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } /* Forum-Snippet: design2026 setzt white-space:nowrap für Einzeiler-Ellipsis. Auf Mobile → normaler Umbruch (2-3 Zeilen sind lesbar). */ .forum-snippet { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: unset; } /* ---- show_topics / Thread-Liste (forum-topics-main) ---- */ .page-forum-topics-outer, .page-forum-topics, .forum-topics-main { width: 100%; max-width: 100%; padding: 0; display: block; grid-template-columns: 1fr; } .forum-topics-main > *, .page-forum-topics > * { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .forum-topics-sidebar { display: none; } /* Inline display:flex-Zeilen in ALLEN Forum-Bereichen aufbrechen. Auf DCForum-Seiten (boerse-aktien.php, dcboard.php) sowie in page-forum-* und forum-topics-main. flex-direction:column erzwingt, dass Kinder stacken — sonst shrinkt ein `flex:1;min-width:0` Kind auf 8 px wenn Geschwister natural-content haben. Ziel: body[class*="forum"] würde ideal sein, aber die Seiten haben kein Body-Class. Wir fangen via Pfad (URL-scoped via PHP in top.html ausgegeben) ODER via globalem Match auf inline-flex-Divs innerhalb dcborder-Tabellen. */ table.dcborder div[style*="display:flex"], table.dcborder div[style*="display: flex"], .forum-topics-main div[style*="display:flex"], .forum-topics-main div[style*="display: flex"], .page-show-topic div[style*="display:flex"], .page-show-topic div[style*="display: flex"], .page-forum-topics div[style*="display:flex"], .page-forum-topics div[style*="display: flex"], .page-forum-uebersicht div[style*="display:flex"], .page-forum-uebersicht div[style*="display: flex"] { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } table.dcborder div[style*="display:flex"] > *, table.dcborder div[style*="display: flex"] > *, .forum-topics-main div[style*="display:flex"] > *, .forum-topics-main div[style*="display: flex"] > *, .page-show-topic div[style*="display:flex"] > *, .page-show-topic div[style*="display: flex"] > *, .page-forum-topics div[style*="display:flex"] > *, .page-forum-topics div[style*="display: flex"] > *, .page-forum-uebersicht div[style*="display:flex"] > *, .page-forum-uebersicht div[style*="display: flex"] > * { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; } .forum-toolbar, .forum-status-bar, .forum-pagination-top, .forum-pagination-bottom { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; font-size: 12px; width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; } .forum-toolbar > *, .forum-status-bar > *, .forum-pagination-top > *, .forum-pagination-bottom > * { flex: 0 0 auto; width: auto; min-width: 0; font-size: 12px; } /* Parent-Wrapper der diese Bars oft in schmale Flex-Spalten quetscht */ .forum-toolbar, .forum-status-bar, .forum-pagination-top, .forum-pagination-bottom, .author_div .bewerten-inline { white-space: normal; } /* Bewerten-Inline / Icons in Post-Header horizontale Anordnung */ .author_div, .bewerten-inline { display: flex; flex-wrap: wrap; width: auto; min-width: 0; } /* ---- DCForum Legacy (dcborder, dclite, dcheading, show_mesg) ---- KRITISCH: table.dctoc (Thread-Antwort-Hierarchie) hat in /forum/jscss/a-p/modern.css die Regel `table.dctoc table { table-layout: fixed }`. Bei 393 px Viewport + vielen Posts erzeugt das eine 478 000 px hohe Höhen-Kaskade. Lösung: .dctoc auf Mobile komplett ausblenden (hat auf Mobile ohnehin kaum Mehrwert — Posts folgen chronologisch). */ .dctoc, table.dctoc, td.dcmenu, .dcmenu { display: none; } /* Thread-Liste (show_topics) Reply-Tree — war flex-row mit .tree-left (Titel) flex:1 und .tree-meta (Autor+Datum) 300px fix → Titel wurde auf 11 px gequetscht, buchstabenweise gestapelt. Auf Mobile flex-column → Titel über Meta, je volle Breite. */ .tree-reply-row { flex-direction: column; align-items: flex-start; gap: 2px; } .tree-reply-row > .tree-left, .tree-reply-row > .tree-right { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; word-break: normal; overflow-wrap: break-word; } .tree-reply-row > .tree-meta { flex: 0 0 auto; max-width: 100%; font-size: 11px; color: var(--text-sec); white-space: normal; } /* dclite-Cells dürfen hier NICHT overflow-wrap:anywhere erben, sonst bricht jeder Titel buchstabenweise. Strong-Links etc. behalten normalen word-break */ td.dclite a, td.dclite strong, td.dclite b { word-break: normal; overflow-wrap: break-word; } /* Outer Container + dcborder: schrumpfen auf Viewport, Text umbricht auf dclite-Zellen dank word-break-Regel weiter oben. */ .page-show-topic, .page-forum-topics, .forum-topics-main, .page-forum-uebersicht { max-width: 100%; overflow-x: hidden; } .page-show-topic table.dcborder, .page-forum-topics table.dcborder, .forum-topics-main table.dcborder, #message_box, #message_box table { width: 100%; max-width: 100%; } /* Outer-Layout des gesamten Forum-Frames (ein wrapper-DIV ohne Klasse zwischen .content-inner und .dcborder) gegen horizontal-overflow */ .content-inner > div:has(> table.dcborder) { max-width: 100%; overflow-x: auto; } /* Word-Break auf dclite-Zelle (Post-Content) — verhindert Overflow durch lange URLs/Wörter. NICHT auf alle TDs anwenden, sonst explodiert das nested-Table-Layout der DCForum-Struktur. */ td.dclite, td.dcheading, td.dcinfo { padding: 8px 10px; font-size: 14px; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; } /* Post-Header (Autor + Datum) — kleiner */ td.dcheading { font-size: 12px; background: var(--blue-50); } /* Post-Meta (als Antwort auf ...) — noch kleiner */ .dcinfo { font-size: 11px; color: var(--text-sec); } /* Einzelner Post: keine äußere Rahmenlinie, nur subtile Trennlinie unten. KEIN display:block auf TDs — DCForum hat verschachtelte Tabellen, und ein Overwrite macht das gesamte Layout kaputt (Höhe explodiert). */ table.dcborder { margin: 0 0 4px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--bg-card); } /* Forum-Seiten: body padding von forum/modern.css (0 15px) auf Mobile eliminieren — spart je 15 px links/rechts → volle Viewport-Breite. Deckt: Thread-View, Thread-Liste, Übersicht, Login, Register, Profil */ body:has(.page-show-topic), body:has(.page-forum-topics), body:has(.page-forum-uebersicht), body:has(.page-forum-login), body:has(.page-forum-register), body:has(.forum-toolbar), body:has(table.dcborder) { padding-left: 0; padding-right: 0; } /* content-inner in Forum-Context: Seitenabstand 8px → 4px */ body:has(.page-show-topic) .content-inner, body:has(.page-forum-topics) .content-inner, body:has(.page-forum-uebersicht) .content-inner, body:has(.page-forum-login) .content-inner, body:has(.page-forum-register) .content-inner, body:has(.forum-toolbar) .content-inner, body:has(table.dcborder) .content-inner { padding-left: 4px; padding-right: 4px; } /* .card auf Forum-Seiten: Innen-Abstand 16px → 6px, Rahmen entfernen */ .page-show-topic .card, .page-forum-topics .card, .forum-topics-main .card, .page-forum-uebersicht .card { padding: 6px; border: none; border-radius: 0; margin-bottom: 4px; box-shadow: none; } /* Images in Posts skalieren */ .dclite img, td.dclite img, #message_box img { max-width: 100%; height: auto; } /* Forum-Formular (Reply/New Post) */ #text_msg, textarea[name="message"], .forum-textarea textarea { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; /* verhindert iOS-Zoom */ } #breadcrumb_div { padding: 4px 8px; font-size: 12px; } /* Forum Login: .login-card hat 32px Innenabstand (→ 24px bei ≤640px). Auf 393px kommen body:15px + page:16px + card:24px = 55px je Seite. Reduktion auf 14px Innenabstand, body-Padding via body:has oben = 0. */ .login-card { padding: 14px; } /* Login-Zwei-Spalten-Layout: gap + Abstände auf Mobile minimal */ .login-left { padding-right: 0; padding-bottom: 16px; } .login-right { padding-left: 0; } /* Login-Divider: modern.css base-Regel (padding:0 20px) schlägt design2026 ≤600px-Regel —-Override nötig da modern.css nach design2026.min.css geladen wird */ .login-divider-v { flex-direction: row; padding: 0; margin: 0 0 16px; } .login-divider-v::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: none; border-top: 1px solid var(--border); width: 100%; } .login-divider-v span { margin-top: 0; padding: 0 14px; } /* Login-Formular: Inputs volle Breite, 16px font (kein iOS-Zoom) */ .login-card .form-control { font-size: 16px; width: 100%; box-sizing: border-box; } /* Submit-Button volle Breite auf Mobile */ .login-card .btn-submit { width: 100%; padding: 12px; font-size: 16px; } /* §8 — MUSTER G · NEWS-DETAIL (shownews.html) ================ */ .page-shownews { grid-template-columns: 1fr; padding: 0 0 24px; } .article-card { border-radius: 0; border-left: 0; border-right: 0; } .article-card .article-body { padding: 12px 10px; font-size: 15px; } .article-company-bar { padding: 8px 10px; flex-direction: column; align-items: flex-start; gap: 6px; } .company-name-row .company-name { font-size: 17px; } .article-links { gap: 6px; flex-wrap: wrap; } .article-links a { font-size: 11px; padding: 3px 8px; } /* Handelssystem: `.page-handelssystem` ist ein Grid, `.handelssystem-content` enthält eine Tabelle mit HTML-attr width="540". Grid auf block stellen, Content scrollbar machen — so bleibt die Tabelle lesbar auf 393 px. */ .page-handelssystem { display: block; } .handelssystem-content { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } .handelssystem-content table { min-width: 0; } /* §9 — DRAWER-MENÜ =========================================== */ /* Bestehende Inline-Accordion-Submenus auf Mobile ausblenden — wir nutzen ab jetzt den Drawer */ .inline-submenu { display: none; } #menu-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 360px); background: var(--bg-card); box-shadow: 2px 0 16px rgba(0,0,0,0.18); transform: translateX(-100%); transition: transform 0.28s ease; z-index: 1001; overflow: hidden; display: flex; flex-direction: column; } #menu-drawer.open { transform: translateX(0); } #menu-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 1000; } #menu-drawer-scrim.open { opacity: 1; pointer-events: auto; } #menu-drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card); } #menu-drawer .drawer-head-title { font-weight: 700; font-size: 15px; color: var(--text-primary); } #menu-drawer .drawer-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--text-sec); cursor: pointer; padding: 4px 8px; } #menu-drawer .drawer-search { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card); } #menu-drawer .drawer-search input { width: 100%; padding: 10px 12px; font-size: 16px; /* 16px verhindert iOS-Auto-Zoom */ border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; background: var(--bg-card); color: var(--text-primary); } #menu-drawer .drawer-sections { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } #menu-drawer .d-section > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; background: none; border: 0; font-size: 16px; color: var(--text-primary); cursor: pointer; text-align: left; border-bottom: 1px solid var(--border); } #menu-drawer .d-section > button::after { content: '›'; font-size: 22px; color: var(--text-sec); transition: transform 0.2s; line-height: 1; } #menu-drawer .d-section.open > button::after { transform: rotate(90deg); } #menu-drawer .d-section[aria-current="page"] > button { border-left: 3px solid var(--blue-600); padding-left: 13px; font-weight: 700; color: var(--blue-700); } #menu-drawer .d-sublist { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--bg-body, #f4f5f6); } #menu-drawer .d-section.open .d-sublist { max-height: 800px; } #menu-drawer .d-sublist a { display: block; padding: 10px 16px 10px 32px; font-size: 15px; color: var(--text-primary); border-bottom: 1px solid rgba(0,0,0,0.05); text-decoration: none; } #menu-drawer .d-sublist a:hover { background: rgba(0,0,0,0.02); } #menu-drawer .d-sublist a.parent-link { font-weight: 700; color: var(--blue-600); background: rgba(35, 84, 149, 0.04); } /* §10 — COMPANY-PICKER BOTTOM-SHEET ========================== */ /* Beide Hamburger (links + rechts) deutlich sichtbar mit Hintergrund. Touch-Target 48×48 px per WCAG 2.2 AAA (min. 44×44, empfohlen 48). */ /* design2026 rendert ☰ via ::before (font-size:0 auf dem Button selbst). Mobile setzt font-size:20px → ::before ausblenden, sonst Doppel-Burger. */ #menu-toggle::before { content: none; } #menu-toggle, .header-toggle-right { background: var(--blue-50); border: 1px solid var(--blue-100, #dbe6f5); border-radius: 8px; color: var(--blue-700); width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; display: flex; align-items: center; justify-content: center; } /* Login-Icon + Watchlist-Stern Wrapper auf 48×48 Tap-Target */ .header-watchlist-icon, .header-login { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } #menu-toggle:hover, #menu-toggle:active, .header-toggle-right:hover, .header-toggle-right:active { background: var(--blue-100, #dbe6f5); border-color: var(--blue-500); } .header-toggle-right { display: flex; /* überstimmt den Default-Hide außerhalb der Media-Query */ align-items: center; justify-content: center; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 0; z-index: 10; } .header-toggle-right svg { display: block; margin: 0 auto; fill: currentColor; } /* Nur innerhalb nav-inner/header-2027-inner positionieren */ .nav-inner .header-toggle-right, .header-2027-inner .header-toggle-right { position: absolute; } #company-picker-sheet { position: fixed; inset: auto 0 0 0; max-height: 85dvh; background: var(--bg-card); border-top-left-radius: 14px; border-top-right-radius: 14px; box-shadow: 0 -4px 24px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 0.28s ease; z-index: 1000; display: flex; flex-direction: column; } #company-picker-sheet.open { transform: translateY(0); } #company-picker-sheet .sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 4px; } #company-picker-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 6px; } #company-picker-sheet .sheet-title { font-weight: 700; font-size: 15px; color: var(--text-primary); } #company-picker-sheet .sheet-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--text-sec); cursor: pointer; padding: 4px 8px; } #company-picker-sheet .sheet-search { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card); } #company-picker-sheet .sheet-search input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; } #company-picker-sheet .sheet-segments { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--border); scrollbar-width: none; background: var(--bg-card); } #company-picker-sheet .sheet-segments::-webkit-scrollbar { display: none; } #company-picker-sheet .sheet-segments a { padding: 6px 12px; border-radius: 999px; background: var(--bg-body, #f4f5f6); font-size: 13px; white-space: nowrap; text-decoration: none; color: var(--text-primary); border: 1px solid var(--border); } #company-picker-sheet .sheet-segments a.active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); } #company-picker-sheet .sheet-list { overflow-y: auto; flex: 1; padding: 4px 0 16px; -webkit-overflow-scrolling: touch; } #company-picker-sheet .sheet-list a { display: block; padding: 10px 16px; font-size: 15px; color: var(--text-primary); border-bottom: 1px solid rgba(0,0,0,0.04); text-decoration: none; } #company-picker-sheet .sheet-list a.current { background: var(--blue-50); font-weight: 700; color: var(--blue-700); } #company-picker-sheet .sheet-list a:hover { background: rgba(0,0,0,0.02); } #company-picker-sheet .sheet-empty { padding: 20px; text-align: center; color: var(--text-sec); font-size: 14px; } #company-picker-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 999; } #company-picker-scrim.open { opacity: 1; pointer-events: auto; } /* Bei offenem Drawer/Sheet: body scroll sperren */ body.no-scroll { overflow: hidden; } /* Footer auf Mobile einspaltig (sonst overflow .footer-columns) */ .footer-columns, .footer-inner, footer .columns { display: block; grid-template-columns: 1fr; padding: 10px 8px; } .footer-columns > *, .footer-inner > * { width: 100%; margin: 4px 0; } /* §11 — STUFE 1 · BOTTOM-TAB-BAR ============================= */ #bottom-tab-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--bg-card, #fff); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0,0,0,0.06); /* iPhone-Home-Indicator und Android-Gesture-Bar freilassen */ padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); height: calc(56px + env(safe-area-inset-bottom, 0)); } #bottom-tab-bar .bt-tab { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 0 6px; font-size: 10px; /* 6 Tabs auf 393 px → knapper Platz */ line-height: 1.1; letter-spacing: -0.1px; color: var(--text-sec); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color 0.15s, background 0.15s; text-align: center; white-space: nowrap; overflow: hidden; } #bottom-tab-bar .bt-tab svg { width: 22px; height: 22px; flex-shrink: 0; } #bottom-tab-bar .bt-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #bottom-tab-bar .bt-tab:hover, #bottom-tab-bar .bt-tab:active, #bottom-tab-bar .bt-tab:focus-visible { color: var(--blue-700); background: var(--blue-50); outline: 0; } #bottom-tab-bar .bt-tab.bt-current { color: var(--blue-700); font-weight: 600; } #bottom-tab-bar .bt-tab.bt-current::before { content: ''; position: absolute; top: 0; height: 3px; width: 32px; background: var(--blue-600); border-radius: 0 0 3px 3px; } #bottom-tab-bar .bt-tab { position: relative; } /* Content bekommt unten Abstand, damit Bottom-Bar nichts verdeckt */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } /* Safe-Area-Insets — Header, Drawer und Sheet honorieren Notch/Dynamic Island */ .header-2027 { padding-top: env(safe-area-inset-top, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } #menu-drawer { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); } #company-picker-sheet { padding-bottom: env(safe-area-inset-bottom, 0); } /* Sticky-Navline Top-Offset berücksichtigt safe-area-inset-top */ #navline { top: calc(54px + env(safe-area-inset-top, 0)); } /* ================================================================ * §11 — ABOVE-THE-FOLD FIX (2026-04-19, v=20260419u) * ================================================================ * Ziel: auf 393×852 iPhone-Portrait sichtbar machen: * - Logo + Hamburger + Suche in EINER Zeile (≤ 56 px Navline) * - Navline sticky am Top ohne doppeltem Header-Shadow * - Kursliste-Header-Widget kompakt (Titel inline mit Top3/Flop3) * - Forum-Post-Headline liest horizontal, kein Letter-Wrap * ================================================================ */ /* 1) Header (Logo+Login-Icons) kompakt, Desktop-Layout nicht gestört */ .header-2027-inner { padding: 6px 10px; gap: 10px; min-height: 48px; } .header-2027-inner .header-logo img { max-height: 28px; width: auto; } .header-2027-inner .header-right-group { gap: 4px; } .header-2027-inner .header-right-group > a { width: 48px; height: 48px; } /* 2) Navline = EINZEILIG, Hamburger|Suche * Gemessene Höhe: 60px = min-height(48 Touch-Target) + padding 6+6. * `min-height: 48px` garantiert WCAG-Touch-Target selbst wenn Content * kleiner ist (z.B. falls Search-Form schrumpft). */ #navline { width: 100%; max-width: 100%; box-sizing: border-box; } #navline .nav-inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 6px 10px; min-height: 48px; max-width: 100%; box-sizing: border-box; } #navline .nav-inner > #menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; } #navline .nav-inner > #header-search-form, #navline .nav-inner > form.header-search { flex: 1 1 auto; min-width: 0; margin: 0; max-width: 100%; } #navline .nav-inner > #header-search-form #search_box, #navline .nav-inner > form.header-search #search_box { width: 100%; display: flex; gap: 6px; } #navline .nav-inner > #header-search-form input[type="text"], #navline .nav-inner > #header-search-form input[type="search"], #navline .nav-inner > form.header-search input { flex: 1 1 auto; min-width: 0; width: auto; font-size: 16px; /* verhindert iOS-Zoom bei Focus */ height: 38px; border-radius: 8px; box-sizing: border-box; } /* Legacy-globales