/* ========================================================================== ft-responsive.css — Welle 5033 (Betreiber: „mach alles responsiv verfügbar“) Ziel: jede Seite ohne waagerechtes Scrollen und ohne abgeschnittene Inhalte bei 320 / 360 / 390 / 768 / 1024 px, hell + dunkel; Bedienelemente ≥ 44 × 44 px auf Touch; Eingabefelder ≥ 16 px (kein iOS-Zoom). Nur additive Regeln, keine Texte. Laden: in allen Kopfzeilen DIREKT NACH assets/css/ft-a11y.css (?v=1). Prüfskript: scratchpad/w5033/responsive_scan.php, Bericht: w5033/responsive_bericht.md ========================================================================== */ /* ---------- 1. Bootstrap-Slim-Lücken ---------- Site-weit wird assets/vendor/bootstrap/bootstrap.slim.min.css geladen (gekürzter Build). Darin fehlen u. a. row-cols-*, einige col-sm-*, .table, .m-0 — Seiten, die sie benutzen (z. B. friendsbot.php: Paketkarten), quetschten Spalten nebeneinander statt umzubrechen. Regeln 1:1 aus bootstrap.min.css (erzeugt mit w5033/gen_bs_gaps.php), Medienblöcke aufsteigend. */ .row-cols-1>*{flex:0 0 auto;width:100%} .col-9{flex:0 0 auto;width:75%} .vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch} .float-end{float:right!important} .float-none{float:none!important} .m-0{margin:0!important} .m-1{margin:.25rem!important} .m-2{margin:.5rem!important} .m-3{margin:1rem!important} .m-4{margin:1.5rem!important} .m-auto{margin:auto!important} .mt-0{margin-top:0!important} .me-5{margin-right:3rem!important} .ms-5{margin-left:3rem!important} .pt-1{padding-top:.25rem!important} .pe-5{padding-right:3rem!important} .ps-5{padding-left:3rem!important} /* .table: Breite/Abstände wie Bootstrap; Farben bleiben wie bisher (transparent, geerbte Schrift) -> hell + dunkel lesbar. :where() = Spezifität 0: Seiten mit vollem bootstrap.min.css (Admin, login.php) und .table-dark/-light behalten ihre Werte. */ :where(.table){--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:inherit;--bs-table-bg:transparent;--bs-table-border-color:var(--bs-border-color,#dee2e6);--bs-table-accent-bg:transparent;--bs-table-striped-color:inherit;--bs-table-striped-bg:rgba(127,127,127,.08);--bs-table-active-color:inherit;--bs-table-active-bg:rgba(127,127,127,.14);--bs-table-hover-color:inherit;--bs-table-hover-bg:rgba(127,127,127,.11);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)} :where(.table>:not(caption)>*>*){padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width,1px);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))} :where(.table>tbody){vertical-align:inherit} :where(.table>thead){vertical-align:bottom} :where(body.dark-mode, html.ft-dark-pre) :where(.table){--bs-table-border-color:rgba(255,255,255,.16)} @media (min-width:576px){ .row-cols-sm-2>*{flex:0 0 auto;width:50%} .col-sm-2{flex:0 0 auto;width:16.66666667%} .col-sm-3{flex:0 0 auto;width:25%} .col-sm-5{flex:0 0 auto;width:41.66666667%} .col-sm-7{flex:0 0 auto;width:58.33333333%} .flex-sm-row{flex-direction:row!important} } @media (min-width:768px){ .row-cols-md-2>*{flex:0 0 auto;width:50%} .offset-md-2{margin-left:16.66666667%} } @media (min-width:992px){ .d-lg-inline{display:inline!important} .d-lg-flex{display:flex!important} } @media (min-width:1200px){ .row-cols-xl-4>*{flex:0 0 auto;width:25%} } /* ---------- 2. Grundschutz gegen waagerechtes Scrollen ---------- :where() = Spezifität 0 -> jede vorhandene Seitenregel gewinnt weiterhin. */ :where(main, article, .container, .container-fluid, .card-body, .modal-body) :where(img, video, canvas, iframe, embed, object) { max-width: 100%; } /* Bilder/Videos mit width+height-Attribut behalten beim Verkleinern ihr Seitenverhältnis */ :where(main, article, .container, .container-fluid, .card-body, .modal-body) :where(img[width][height], video[width][height]) { height: auto; } :where(main, article, .card-body, .modal-body) :where(pre) { max-width: 100%; overflow-x: auto; } :where(main, article, .card-body, .modal-body) :where(code, kbd, samp) { overflow-wrap: anywhere; } :where(main, article, .card-body, .modal-body, .alert) :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, label, legend, summary) { overflow-wrap: break-word; } /* Video-Einbettungen ohne Seitenverhältnis-Box */ :where(main, article, .card-body) :where(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="dailymotion"]) { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* Tabellen, die per assets/js/ft-responsive.js in einen Rollbereich gelegt wurden */ .ft-resp-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .ft-resp-scroll > table { margin-bottom: 0; max-width: none; } /* ft-mobile-pro.css: table{max-width:100%} würde die Tabelle wieder klemmen */ /* Fieldsets: Browser-Standard min-width:min-content sprengt sonst schmale Spalten */ fieldset { min-width: 0; } /* Schwebendes Saison-Etikett (css/ft-season.css) verdeckte das Seitenende -> Fußzeile bekommt Platz darunter */ body:has(.ft-season-chip.is-in:not([hidden])) .ftf { padding-bottom: 76px; } /* ---------- 3. Mobile Höhen: 100vh -> 100dvh (Adressleiste auf Mobil) ---------- */ @supports (height: 100dvh) { .vh-100 { height: 100dvh !important; } .min-vh-100 { min-height: 100dvh !important; } } /* ---------- 4. Lesbarkeit auf Mobil ---------- */ @media (max-width: 767.98px) { /* Eingabefelder unter 16 px lösen auf iOS beim Antippen einen Zoom aus */ .form-control:not(.form-control-lg), .form-select:not(.form-select-lg), .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: 1rem; } /* ft-mobile-pro.css setzt alle Auswahl-Beschriftungen auf .9rem !important (14,4 px) — im Inhalt wieder 16 px */ main .form-check-label, [role="main"] .form-check-label { font-size: 1rem !important; } /* Startseite (index.php, Stile im ): Fließtext .88–.95rem -> 16 px */ main .ft-idx-intro p, section.ft-trust .ft-trust-card p, body .ft-holiday-banner p { font-size: 1rem; } /* Rechtsseiten (legal/_legal_template.php setzt .lp-content-card p auf .96em) */ main article.lp-content-card p { font-size: 1rem; } main p.sec-muted { font-size: 1rem; } /* sicherheit.php .92rem */ main .ft-help-meta dd, main .ft-blog-card__excerpt { font-size: 1rem; } /* hilfe.php, blog.php .92rem */ } /* ---------- 5. Zielgrößen ≥ 44 × 44 px auf Touch (WCAG 2.5.5) ---------- ft-a11y.css setzt min-height:24px mit :where(…):not(.visually-hidden):not(.sr-only) = Spezifität (0,2,0); darum hier :root-Präfix (0,2,0+) — diese Datei lädt danach und gewinnt. */ @media (pointer: coarse) { :root .btn, :root body .btn.btn-sm { min-height: 44px; --bs-btn-padding-y: .5625rem; } /* ft-buttons.css + header.php: .btn-sm 36 px */ :root .btn-sm, :root .btn-group-sm > .btn { --bs-btn-padding-y: .625rem; } :root .ft-btn--sm, :root .ft-btn-sm, :root .ft-chip { min-height: 44px; } /* ft-design-system.css 32–38 px */ :root .ft-btn--icon.ft-btn--sm { width: 44px; } :root .navbar-custom .navbar-nav .nav-link { min-width: 44px; min-height: 44px; justify-content: center; } /* Hell/Dunkel-Schalter 33 × 24 px */ :root .navbar-custom .navbar-brand { min-height: 44px; min-width: 44px; } :root .navbar-custom .navbar-toggler, :root .navbar-toggler { min-width: 44px; min-height: 44px; } :root .ft-season-chip .ft-season-chip__close { width: 44px; min-height: 44px; } :root .btn-close { min-width: 44px; min-height: 44px; } :root .form-control, :root .form-select { min-height: 44px; } :root .dropdown-item { padding-top: .625rem; padding-bottom: .625rem; } :root .nav-tabs .nav-link, :root .nav-pills .nav-link, :root .list-group-item-action { min-height: 44px; } :root .pagination { --bs-pagination-padding-y: .625rem; } :root .page-link { min-width: 44px; text-align: center; } :root .skip-link, :root .ft-skip-link { min-height: 44px; } /* Fußzeile (assets/css/ft-footer.css): Sprachliste 40 px, Magazin-Links 39 px, Hell/Dunkel 36 px, Marke 36 px */ :root .ftf .ftf-lang__link, :root .ftf .ftf-theme__btn, :root .ftf .ftf-brand__link, :root .ftf .ftf-chip { min-height: 44px; } :root .ftf .ftf-link, :root .ftf .ftf-legalbar__list .ftf-link, :root .ftf .ftf-col__sum { min-height: 44px; } :root .ftf .ftf-legalbar__list .ftf-link { min-width: 44px; align-items: center; } /* „AGB“ war 25 px breit */ :root .ftf .ftf-mag__link { padding-block: 12px; } :root .ftf .ftf-link:not(.ftf-mag__link) { display: flex; flex-direction: column; justify-content: center; } /* Cookie-Hinweis (includes/footer.php) */ :root #cookieConsentBanner .btn { min-height: 44px; } /* Startseite (index.php): Themen-Links 42 px, „Passwort vergessen?“/„Noch kein Konto?“ 39 px, Vertrauens-Leiste 21 px */ :root .ft-topics-list a { min-height: 44px; } :root .forgot-password-link, :root .btn-toggle-form { min-height: 44px; display: inline-flex; align-items: center; } :root .ft-trust-badges a { display: inline-flex; align-items: center; min-height: 44px; } :root .halloween-alert .halloween-alert-close { min-height: 44px; } /* Themen-/Lexikonseiten (thema.php, lexikon.php): Brotkrumen 22 px, Begriffs-Chips 41 px, A–Z 37 px, FAQ-Zeilen 26 px */ :root .ft-topic__crumb a, :root .ft-lex__crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } :root .ft-topic__gloss a, :root .ft-lex__chips a { display: inline-flex; align-items: center; min-height: 44px; } :root .ft-lex__az a { min-width: 44px; height: 44px; } :root .ft-topic summary, :root .ft-lex summary { padding-block: 9px; } :root .press-hero .press-jump a { display: inline-flex; align-items: center; min-height: 44px; } /* presse.php 42 px */ /* Anmeldeseite login.php (eigener Kopf): Vertrauens-Abzeichen 27 px, Rechtslinks 29 px, Textlinks 42 px */ :root .login-wrapper .trust-badge { display: inline-flex; align-items: center; min-height: 44px; } :root .login-wrapper .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } :root .login-wrapper .d-flex > a.text-decoration-none { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 767.98px) { .login-wrapper .login-hero p { font-size: 1rem; } .login-wrapper .trust-badge { font-size: .875rem; } /* vorher .72em ≈ 11,5 px */ } /* ---------- 6. Kopfleiste für Gäste (Logo + 2 Symbole + Sprachwahl) ---------- Bei < 400 px ragte die Sprachwahl rechts aus dem Bildschirm (375 px: 11 px, 320 px: ~66 px). Wie ft-a11y.css unter 360 px: Schriftzug ausblenden, Logo-Bild (mit alt) bleibt. */ @media (max-width: 399.98px) { .navbar-custom:has(.ft-lang-dropdown) .navbar-brand .logo-friends, .navbar-custom:has(.ft-lang-dropdown) .navbar-brand .logo-time { display: none; } .navbar-custom .ft-lang-dropdown .btn { white-space: nowrap; } } .navbar-custom .ft-lang-dropdown .dropdown-menu { max-width: calc(100vw - 16px); } /* ---------- 6b. Nachrichten (messages.php, Stile im ) ---------- Der Chat-Kopf hat bis zu 7 Rundknöpfe (Anruf, Video, Profil, Watchparty, Verschwinden, Anpassen, Leeren). Bis 575 px blieb für Bild + Name 0 px Breite: der Name des Gegenübers war unsichtbar. Jetzt: Name in Zeile 1, Knopfleiste in Zeile 2 (rollt notfalls waagerecht, Knöpfe 44 px). */ @media (max-width: 575.98px) { :root .chat-header .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 6px; } :root .chat-header .d-flex.justify-content-between > .d-flex:first-child { flex: 1 1 100%; } :root .chat-header .d-flex.justify-content-between > .d-flex.gap-2, :root .chat-header .d-flex.justify-content-between > .ft-grp-actions { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; justify-content: flex-start; justify-content: safe flex-end; gap: 6px !important; padding-bottom: 2px; scrollbar-width: thin; } :root .chat-header .d-flex.justify-content-between > .d-flex.gap-2 > *, :root .chat-header .d-flex.justify-content-between > .ft-grp-actions > * { flex: 0 0 auto; } } @media (max-width: 575.98px) and (pointer: coarse) { :root .chat-header .btn-circle { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } :root .chat-header .btn-link.d-md-none { min-width: 44px; min-height: 44px; } } /* ---------- 7. FriendsBot (friendsbot.php, Selektoren .ft-ki*) ---------- Die Seite hat einen eigenen