/* ========================================================================== TSV 2000 Rothenburg Handball – Mobile Optimierung Datei: haro2000-mobile.css | Version 1.3 | Stand: 25.09.2026 NEU IN 1.3 - Block 3: Die Card auf der Startseite hing direkt am Menü. Ursache war meine eigene Obergrenze von 64px aus Version 1.2 – die Spalte trägt im Builder 8rem (128px), genau damit sie unter dem fixierten Header startet. Jetzt gibt es dafür dieselbe Ausnahme wie bei den Sektionen. - Block 8 (neu): „© J. Grimme" klein unter „Spieltagsbilder" im Klappmenü. Projekt: haro2000.de (WordPress 7.1.2 + Avada 7.x / Fusion Builder) WICHTIG – ZUERST LESEN Auf haro2000.de liegt aktuell die Datei baloop-mobile.css im Child-Theme (/wp-content/themes/Avada-Child-Theme/css/). Die bitte entfernen bzw. aus dem Enqueue nehmen und durch diese hier ersetzen. Sie ist auf die baloop-Werte gerechnet und passt hier nicht: - Sie setzt --awb-typography3-font-size auf clamp(17.5px … 24px). Auf haro2000 steht Set 3 auf 20px – zwischen rund 640 und 1024px wird der Text dadurch GRÖSSER als vorgesehen (bis 24px). - Sie enthält Regeln für Hero-Slider, Off-Canvas-Panels und Formularstrecken, die es hier so nicht gibt. AUSGANGSLAGE (gemessen bei 375 x 812, Startseite und /teams/) Die Seite ist mobil schon deutlich besser aufgestellt als baloop: - Avada Responsive Typography ist aktiv und greift ab 800px (Sensitivity 0.50, Untergrenze 0.50 x 18px = 9px) - Überschriften landen dadurch sauber: H1 37px, H2 29px, H3 23px - Grundschrift 18px / 1,6 – passt, wird hier NICHT angefasst Die Probleme liegen woanders: 1. Die Untergrenze von 9px lässt kleine Titel abstürzen: Spieler- und Trainernamen (Design-Größe 14px) landen bei 11,6px. Auf /teams/ betrifft das 42 Elemente. 2. Seitenrand 32px und Sektionspolster 64px sind auf 375px zu viel 3. Einzelne Sektionen/Spalten mit 8rem (128px) Polster 4. Touch-Flächen unter 44px SCOPE Alles in Media Queries <= 800px (Avada Content Break Point dieser Seite) bzw. <= 640px (Avada „Small Screen"). Darüber bleibt die Seite unverändert. ========================================================================== */ /* ========================================================================== 0. STELLSCHRAUBEN – nur hier justieren ========================================================================== */ html:root { /* Seitenrand auf Smartphones */ --h2k-gutter: 20px; /* Obergrenze für vertikales Sektionspolster */ --h2k-section-py: 40px; /* Harte Obergrenze für Sektionen/Spalten, die im Builder sehr viel Polster gesetzt bekommen haben (8rem = 128px) */ --h2k-section-py-max: 64px; /* Mindestmaß für Touch-Flächen */ --h2k-tap: 44px; /* Untergrenze für die fluide Typografie */ --h2k-min-font: 15px; /* Abstand über Logo/Menü (Kopfbereich), mobil */ --h2k-header-py: 48px; /* Abstand, mit dem Inhaltssektionen unter dem fixierten Header starten. Muss größer sein als die Headerhöhe (110–114px). */ --h2k-header-clearance: 112px; /* Dasselbe für Spalten, die den Header unterlaufen – vor allem die Hero-Card auf der Startseite. 128px = die 8rem aus dem Builder, damit bleiben rund 30px Luft unter der Menüleiste. */ --h2k-hero-clearance: 128px; /* Textgröße der Bildnachweis-Zeile im Klappmenü (Block 8) */ --h2k-credit-size: 12px; /* Seitenhintergrund – siehe Block 7 */ --h2k-page-bg: #111111; /* Obergrenze für das Innenpolster von Buttons (Block 4). Damit werden nur die großen Primary-Buttons kompakter, Header-Buttons und Kategorie-Chips bleiben unangetastet. */ --h2k-btn-py-max: 12px; --h2k-btn-px-max: 24px; } /* ========================================================================== 1. GRUNDLAGEN / VIEWPORT-HYGIENE (alle Breiten) ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Sicherheitsnetz gegen horizontales Scrollen. 'clip' statt 'hidden', damit position:sticky/fixed weiter funktioniert. */ html, body { overflow-x: clip; } img, video, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* Tabellen scrollen für sich, statt die Seite zu sprengen */ .fusion-body table, .fusion-body pre { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== 2. TYPOGRAFIE <= 800px – Untergrenze für die fluide Skalierung Avada rechnet die Schriftgröße über eine Formel aus Design-Größe, Sensitivity und Viewport. Die globale Untergrenze steht auf 9px (0.50 x 18px), deshalb schrumpfen kleine Titel auf 11,6px. Statt die Untergrenze global anzuheben – das würde auch alle Überschriften mitziehen – wird hier nur ein Boden eingezogen: max(15px, ). Große Überschriften bleiben damit exakt wie bisher, nur die zu kleinen Elemente werden angehoben. ========================================================================== */ @media only screen and (max-width: 800px) { .fusion-body .fusion-responsive-typography-calculated { font-size: max( var(--h2k-min-font), calc( (var(--fontSize) * 1px) - (var(--typography_sensitivity) * (var(--fontSize) - var(--minFontSize)) * (var(--minViewportSize) * 1px - 100vw)) / (var(--maxViewportSize) - var(--minViewportSize)) - (var(--fontSize) - var(--minFontSize)) * var(--typography_sensitivity) * 1px ) ) !important; } /* Lange Wörter (Mannschaftsnamen, Veranstaltungstitel) dürfen umbrechen, statt die Spalte zu sprengen */ .fusion-body h1, .fusion-body h2, .fusion-body h3, .fusion-body .fusion-title-heading { overflow-wrap: break-word; hyphens: auto; } .fusion-body .fusion-text p, .fusion-body .fusion-text li { overflow-wrap: break-word; text-wrap: pretty; } } /* ========================================================================== 3. ABSTÄNDE <= 640px (Avada „Small Screen") min() kappt nur zu große Werte – bewusst randlose Sektionen bleiben bei 0. Sektionen mit eigenem Small-Screen-Wert aus dem Builder bleiben unberührt, außer sie überschreiten die harte Obergrenze. ========================================================================== */ @media only screen and (max-width: 640px) { .fusion-body .fusion-fullwidth, .fusion-body .fusion-builder-row-container { --awb-padding-left-small: min(var(--awb-padding-left, var(--h2k-gutter)), var(--h2k-gutter)); --awb-padding-right-small: min(var(--awb-padding-right, var(--h2k-gutter)), var(--h2k-gutter)); --awb-padding-top-small: min(var(--awb-padding-top, var(--h2k-section-py)), var(--h2k-section-py)); --awb-padding-bottom-small: min(var(--awb-padding-bottom, var(--h2k-section-py)), var(--h2k-section-py)); } /* Header: seitlich unverändert (dort hängt die Position des Klappmenüs am Container-Polster), oben mehr Luft. 32px -> 48px, der fixierte Header wächst damit von 94 auf 110px. */ .fusion-body .fusion-tb-header .fusion-fullwidth { --awb-padding-left-small: var(--awb-padding-left-medium, var(--awb-padding-left)); --awb-padding-right-small: var(--awb-padding-right-medium, var(--awb-padding-right)); padding-top: var(--h2k-header-py) !important; } /* Harte Obergrenze: einzelne Sektionen tragen 8rem (128px) aus dem Builder. Auf 375px ist das zu viel leere Fläche. */ .fusion-body .fusion-fullwidth { padding-top: min(var(--awb-padding-top-small, 0px), var(--h2k-section-py-max)) !important; padding-bottom: min(var(--awb-padding-bottom-small, 0px), var(--h2k-section-py-max)) !important; } /* AUSNAHME von der Obergrenze: Der Header liegt mit position:fixed über dem Inhalt. Sektionen, die im Builder bewusst 6rem oder 8rem Polster oben tragen, starten genau deshalb unter dem Header – die dürfen nicht gekappt werden, sonst rutscht die Überschrift unter Logo und Menü. Sie bekommen die Headerhöhe plus etwas Luft. */ .fusion-body .fusion-fullwidth[style*="--awb-padding-top-small:6rem"], .fusion-body .fusion-fullwidth[style*="--awb-padding-top-small:8rem"] { padding-top: var(--h2k-header-clearance) !important; } /* Dasselbe für Spalten (eine Spalte auf der Startseite hat 128px oben) */ .fusion-body .fusion-column-wrapper { padding-top: min(var(--awb-padding-top-small, 0px), var(--h2k-section-py-max)) !important; padding-bottom: min(var(--awb-padding-bottom-small, 0px), var(--h2k-section-py-max)) !important; padding-left: min(var(--awb-padding-left-small, 0px), 24px) !important; padding-right: min(var(--awb-padding-right-small, 0px), 24px) !important; } /* AUSNAHME – Spalten, die unter dem fixierten Header starten sollen. Auf der Startseite trägt die Spalte um die Card 8rem (128px) oben. Die Obergrenze oben hätte daraus 64px gemacht, dadurch rutschte die Card bis auf 34px UNTER die Menüleiste. Der Wert bleibt deshalb auf Headerhöhe plus Luft. Das Polster steht auf der Spalte, die Kante liegt aber am Wrapper darin – daher der Kindselektor. */ .fusion-body .fusion-layout-column[style*="--awb-padding-top-small:6rem"] > .fusion-column-wrapper, .fusion-body .fusion-layout-column[style*="--awb-padding-top-small:8rem"] > .fusion-column-wrapper { padding-top: var(--h2k-hero-clearance) !important; } } /* ========================================================================== 4. TOUCH-TARGETS <= 800px ========================================================================== */ @media only screen and (max-width: 800px) { .fusion-body .fusion-button { min-height: var(--h2k-tap); display: inline-flex; align-items: center; justify-content: center; white-space: normal; /* langer Button-Text darf umbrechen */ max-width: 100%; } /* Primary-Buttons etwas kompakter. Avada legt das Polster jedes Buttons in --awb-padding-* ab – mal inline, mal in einer generierten Klasse. min() kappt deshalb nur nach oben, statt feste Werte zu setzen: Primary („Bericht lesen", „Alle Berichte entdecken") 16/32px -> 12/24px, Höhe 67px -> 59px Header-Buttons (LIVE, MENÜ) 12/20px bleiben Kategorie-Chips 4/12px bleiben Höher oder niedriger: nur die beiden Variablen in Block 0 ändern. */ .fusion-body a.fusion-button { padding-top: min(var(--awb-padding-top, var(--h2k-btn-py-max)), var(--h2k-btn-py-max)) !important; padding-bottom: min(var(--awb-padding-bottom, var(--h2k-btn-py-max)), var(--h2k-btn-py-max)) !important; padding-left: min(var(--awb-padding-left, var(--h2k-btn-px-max)), var(--h2k-btn-px-max)) !important; padding-right: min(var(--awb-padding-right, var(--h2k-btn-px-max)), var(--h2k-btn-px-max)) !important; } /* --- Teamseiten: Buttons über die volle Breite --------------------- Betrifft die Team-Übersicht (/teams/) und die einzelnen Mannschaftsseiten (Custom Post Type „team"). Ausgenommen sind die Kategorie-Chips (0.25rem/0.5rem Polster) und die Buttons im Header. */ .fusion-body.single-team a.fusion-button:not([style*="--awb-padding-top:0.25rem"]):not([style*="--awb-padding-top:0.5rem"]), .fusion-body.post-type-archive-team a.fusion-button:not([style*="--awb-padding-top:0.25rem"]):not([style*="--awb-padding-top:0.5rem"]), .fusion-body.page-id-18 a.fusion-button:not([style*="--awb-padding-top:0.25rem"]):not([style*="--awb-padding-top:0.5rem"]) { width: 100% !important; max-width: 100% !important; } .fusion-body .fusion-tb-header a.fusion-button { width: auto !important; } /* Kategorie-Chips („Herren I", „Jugend") sind reine Labels und bewusst klein – die bleiben von der Mindesthöhe ausgenommen. */ .fusion-body .fusion-button.button-custom.fusion-button-default-size { min-height: 0; } .fusion-body .awb-menu__main-a, .fusion-body .awb-menu__sub-a { min-height: var(--h2k-tap); } .fusion-body .awb-menu__m-toggle, .fusion-body .awb-menu_mobile-mode-collapse-to-button .awb-menu__main-li_m-trigger a { min-width: var(--h2k-tap); min-height: var(--h2k-tap); } } @media only screen and (max-width: 640px) { /* Slider-Punkte: optisch klein, Trefferfläche unsichtbar auf 44px */ .fusion-body .swiper-pagination-bullet, .fusion-body .fusion-carousel-pagination .slide-number { position: relative; } .fusion-body .swiper-pagination-bullet::after, .fusion-body .fusion-carousel-pagination .slide-number::after { content: ""; position: absolute; inset: -16px; } } /* ========================================================================== 5. FORMULARE <= 782px Aktuell gibt es auf der Seite keine Formulare – die Regel ist die Absicherung für später: unter 16px zoomt iOS Safari beim Fokus automatisch in die Seite hinein. ========================================================================== */ @media only screen and (max-width: 782px) { .fusion-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .fusion-body select, .fusion-body textarea { font-size: max(16px, 1em); max-width: 100%; } .fusion-body input[type="submit"], .fusion-body button[type="submit"] { min-height: var(--h2k-tap); } } /* ========================================================================== 7. SEITENHINTERGRUND – weiße Fläche auf den News-Seiten Befund: Avada steht noch auf den hellen Standardfarben. html -> Background Color = #f2f3f5 #main -> Content Background Color = #ffffff Das Design ist aber durchgehend dunkel (#111). Überall, wo keine Sektion mit eigenem Hintergrund darüberliegt, blitzt Weiß durch: - Auf Beitragsseiten sitzt zwischen Inhalt und Footer ein 50px hoher weißer Streifen. Ursache ist ein margin-bottom:50px der Beitrags-Section – auf hellen Seiten fällt das nie auf. - Auf dem iPhone zeigt der Gummiband-Effekt beim Über-den-Rand-Scrollen ebenfalls diesen hellen Hintergrund. - Während ein Hintergrundbild lädt, ist die Fläche kurz weiß. Diese Regel gilt bewusst für alle Breiten, nicht nur mobil – am Desktop ist es dasselbe Thema. SAUBERER WÄRE: Avada > Theme Options > Background Color und Content Background Color auf #111111 stellen. Dann kann dieser Block raus. ========================================================================== */ html, body, .fusion-body #wrapper, .fusion-body .fusion-wrapper, .fusion-body #main, .fusion-body #boxed-wrapper { background-color: var(--h2k-page-bg) !important; } /* ========================================================================== 8. BILDNACHWEIS IM KLAPPMENÜ „Spieltagsbilder" verlinkt auf juergen-foto.de. Darunter steht jetzt klein der Nachweis. Der Menülink ist ein Flexbox in einer Zeile (flex-wrap: nowrap) – eine zweite Zeile direkt am Link würde daneben statt darunter landen. Deshalb hängt die Zeile am inneren . Gilt bewusst für alle Breiten, nicht nur mobil. ALTERNATIVE OHNE CSS: Im WordPress-Menü hat jeder Eintrag ein Feld „Beschreibung" (oben rechts unter „Bildschirmoptionen" einblenden). Trägt man dort „© J. Grimme" ein und aktiviert im Avada-Menü-Element die Beschreibungen, ist der Text im Backend pflegbar. Dann kann dieser Block raus. ACHTUNG: Die ID hängt am Menüeintrag. Wird „Spieltagsbilder" gelöscht und neu angelegt, ändert sich die Nummer und die Zeile verschwindet. ========================================================================== */ #menu-item-8253 .menu-text::after { content: "von J. Grimme"; display: block; font-size: var(--h2k-credit-size); line-height: 1.2; letter-spacing: 0; text-transform: none; font-weight: 400; opacity: 0.65; margin-top: 2px; } /* ========================================================================== 6. BEWEGUNG / BARRIEREFREIHEIT ========================================================================== */ @media (prefers-reduced-motion: reduce) { .fusion-body *, .fusion-body *::before, .fusion-body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== ERGEBNIS bei 375 x 812 vorher nachher Kleine Titel (Spielernamen) 11,6 px 15 px davon auf /teams/ 42 Stück Seitenrand 32 px 20 px Sektionspolster 64 px 40 px Sektion/Spalte mit 8rem 128 px 64 px Überschriften H1/H2/H3 37/29/23 unverändert Grundschrift 18 px unverändert Abstand über Logo/Menü 32 px 48 px Weißer Streifen über dem Footer 50 px weg Primary-Button 67 px hoch 59 px hoch Buttons auf Teamseiten 162 px volle Spaltenbreite Card Startseite, Oberkante 64 px 128 px (Unterkante Menüleiste 98 px) -34 px Luft +30 px Luft Spieltagsbilder im Klappmenü 80 px hoch ~80 px, mit Nachweiszeile Kein horizontaler Überlauf (geprüft: Startseite, /teams/, /news/ und eine Beitragsseite). EINBAU Variante A – Avada > Theme Options > Custom CSS Inhalt hineinkopieren, speichern, danach Avada-Cache und den Cache des Caching-Plugins leeren. Variante B – als eigenes Stylesheet im Child-Theme Datei nach /wp-content/themes/Avada-Child-Theme/css/ legen und in der functions.php einbinden – die Abhängigkeit auf 'fusion-dynamic-css' ist wichtig, sonst lädt die Datei VOR den Avada-Styles: add_action( 'wp_enqueue_scripts', function () { wp_enqueue_style( 'haro2000-mobile', get_stylesheet_directory_uri() . '/css/haro2000-mobile.css', array( 'fusion-dynamic-css' ), '1.3.0' ); }, 999 ); STAND AUF DEM SERVER (gerade nachgesehen): Die Datei liegt aktuell als baloop-mobile.css im Child-Theme und wird mit ?ver=1.0.0 geladen – der Inhalt ist aber schon der haro2000-Stand. Zwei Möglichkeiten: a) Datei umbenennen: haro2000-mobile.css hochladen, den Enqueue auf den neuen Namen und '1.3.0' umstellen, baloop-mobile.css löschen. b) Beim alten Namen bleiben: dann einfach den Inhalt überschreiben und die Versionsnummer im Enqueue hochsetzen. Ohne neue Nummer liefern Browser und Cache die alte Datei weiter aus. Danach Avada-Cache und den Cache des Caching-Plugins leeren. NICHT ANGEFASST – bewusst 1. Das Klappmenü steht auf 32px Schriftgröße. Das ist als großes Vollbild-Menü gestaltet und funktioniert auf dem Handy gut – falls es Dir zu wuchtig ist, im Menü-Element auf 24–26px stellen. 2. Der Intro-Textblock auf der Startseite („VORBERICHT" o. ä.) steht auf 24px in Versalien, mittig, mit enger Zeilenhöhe. Auf 375px ergibt das rund 26 Zeichen pro Zeile. Wenn das stören soll, gehört es ins Text-Element im Builder, nicht ins globale CSS. 3. Der Cookiebot-Dialog bringt eigene Styles mit und wird hier nicht überschrieben. 4. Die Team-Übersicht wird über ihre Seiten-ID angesprochen (.page-id-18). Falls die Seite neu angelegt wird, ändert sich die ID – dann die Zeile in Block 4 anpassen. Die Mannschaftsseiten laufen über .single-team und sind davon unabhängig. ========================================================================== */