/* * mobile.css — responsive overrides for the old fixed-width (~960px) Jimdo * "GJBO" template used by this site. * * This file is appended as the LAST stylesheet in on every page (see * mobile.py), so a plain selector of matching or higher specificity already * wins over layout.css/main.css/font.css/web_oldtemplate.css. !important is * only used where the original markup carries inline styles (which normal * external CSS cannot otherwise beat) or where third-party widget CSS sets * competing rules later in the same file. * * The desktop (>= 1025px) layout is intentionally left untouched. */ /* Safety net: padding/borders never add to an element's declared width. */ *, *::before, *::after { box-sizing: border-box; } img, .bx-wrapper img { max-width: 100%; height: auto; } /* Duplicated top navigation, injected by mobile.py right after . Hidden on desktop; shown only at/under the tablet breakpoint. Visible by default (no JS needed) — mobile.js merely adds a collapse/expand toggle for phones when it is available. */ #mobile-nav { display: none; } /* ========================================================================= Tablet and phone (<= 1024px): collapse the two-column template to one column, scale the header image, and open up tap targets. ========================================================================= */ @media (max-width: 1024px) { html, body { font-size: 16px; } body, #gj-article, #gj-article p, #gj-article li, #gj-article span, #gj-article div, #gj-aside, #gj-aside *, #mobile-nav { font-size: 1rem !important; line-height: 1.5 !important; } #gj-article h1 { font-size: 1.5rem !important; } #gj-article h2 { font-size: 1.3rem !important; } #gj-article h3 { font-size: 1.1rem !important; } /* ---- overall frame: fluid instead of fixed 960px ---- */ #site-wrapper { width: 100% !important; max-width: 100%; border-radius: 0; } .gj-outer, .gj-inner { width: 100% !important; max-width: 100%; margin: 0 auto; } #site-wrapper .tmp-gutter { padding: 14px; } /* ---- header image: scale instead of crop, ditch the ornaments ---- */ #emotion { width: 100% !important; max-width: 100%; } #emotion-header { width: 100% !important; height: auto !important; } #emotion-header-img { display: block; width: 100%; height: auto; } #emotion-header-logo { width: 40px !important; height: 40px !important; } /* Decorative wave/ornament layers are fixed-size background images that can't scale with the header without gaps or clipping — hide them. */ #gj-visual .gj-top, #gj-visual .gj-bottom { display: none; } /* ---- single column: content, then sidebar (nav + phone) ---- */ #gj-article { float: none; width: 100% !important; border-radius: 0 0 10px 10px; } #gj-article .tmp-gutter { padding: 16px; } #gj-sidebar { float: none; width: 100% !important; margin-top: 16px; } #gj-nav-global { width: 100%; padding: 10px 16px 16px; box-sizing: border-box; } #gj-aside { margin-top: 10px; } .tmp-clear { clear: both; } /* ---- tap targets: nav links, phone links ---- */ #gj-nav-global li a, #gj-nav-global li li a { display: block; padding: 12px 10px 12px 30px; min-height: 44px; box-sizing: border-box; } #gj-aside h3 a[href^="tel:"], #gj-article a[href^="tel:"] { display: inline-block; padding: 10px 8px; min-height: 44px; line-height: 1.3; box-sizing: border-box; } /* ---- top mobile nav (duplicate of #gj-nav-global, see mobile.py) ---- */ #mobile-nav { display: block; background: #D5E689; background: linear-gradient(to right, #E2F29D, #D5E689); border-radius: 0 0 10px 10px; overflow: hidden; } #mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #mobile-nav li { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.5); } #mobile-nav a { display: block; min-height: 44px; box-sizing: border-box; padding: 12px 8px; text-align: center; text-decoration: none; color: #404040; font-weight: bold; font-size: .95rem; } #mobile-nav a:hover, #mobile-nav a.current { color: #F2920C; } /* Toggle button only exists (and is shown) once mobile.js has run. */ #mobile-nav .mobile-nav-toggle { display: none; width: 100%; min-height: 44px; padding: 12px 16px; background: #A4CC00; color: #fff; border: 0; text-align: left; font-size: 1rem; font-weight: bold; font-family: inherit; cursor: pointer; } #mobile-nav.js-collapsed .mobile-nav-toggle { display: block; } #mobile-nav.js-collapsed ul { display: none; } #mobile-nav.js-collapsed.open ul { display: flex; } /* ---- content tables (Leistungen) used only for spacing: stack ---- */ #gj-article table { width: 100% !important; } #gj-article table, #gj-article tbody, #gj-article tr, #gj-article td { display: block; width: 100% !important; } #gj-article td { padding: 2px 0; } /* ---- gallery slideshow ---- */ .cc-m-gallery-container { width: 100%; } .bx-wrapper { max-width: 100%; margin-bottom: 46px; } .bx-controls-direction a { width: 44px !important; height: 44px !important; margin-top: -22px !important; font-size: 20px !important; line-height: 44px !important; } .cc-m-gallery-slider-fullscreen { width: 44px !important; height: 44px !important; line-height: 44px !important; } /* Thumbnail strip: turn the fixed-height horizontal scroller into a wrapping grid so every thumbnail stays reachable without a drag. */ .cc-m-gallery-slider-bar { height: auto; position: static; } .cc-m-gallery-slider-thumbnails-wrapper { position: static; height: auto; overflow: visible; padding: 8px 0 0; } .cc-m-gallery-slider-thumbnails { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100% !important; margin: 0; } .cc-m-gallery-slider-thumbnails a { display: block; flex: 0 0 auto; } .cc-m-gallery-slider-thumbnails img { width: 34px; height: 34px; object-fit: cover; } /* ---- footer ---- */ #footer_in { padding: 0 14px; } div#contentfooter { font-size: .85rem !important; } div#contentfooter .leftrow, div#contentfooter .rightrow { float: none; width: 100%; text-align: left; } #footer a { display: inline-block; padding: 6px 4px; } /* ---- "nach oben" floating button: keep it out of the way ---- */ .cc-FloatingButtonBarContainer { right: 12px; bottom: 12px; } .cc-FloatingButtonBarContainer-button-scroll a { display: block; width: 44px; height: 44px; } } /* ========================================================================= Phones (<= 600px): a bit tighter still. ========================================================================= */ @media (max-width: 600px) { #site-wrapper .tmp-gutter { padding: 10px; } #gj-article .tmp-gutter { padding: 12px; } #gj-nav-global { padding: 8px 10px 12px; } #mobile-nav li { flex: 1 1 45%; } .cc-m-gallery-slider-thumbnails img { width: 30px; height: 30px; } } /* Text-with-image blog modules: stacked on phones, no narrow text column beside the photo */ @media (max-width: 600px) { .j-textWithImage .cc-imagewrapper, .j-textWithImage figure { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 0.75em 0 !important; } .j-textWithImage .cc-imagewrapper img { width: 100% !important; height: auto !important; } } /* ---- site-wide: make the phone box in the sidebar the eye-catcher it should be ---- */ #gj-aside.altcolor { background: #fff !important; border: 2px solid #a5c93a; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12); } #gj-aside.altcolor .j-header h3 { color: #444 !important; font-size: 1em !important; font-weight: bold; text-align: center; line-height: 1.4; border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; } #gj-aside.altcolor .j-header h3 a[href^="tel:"] { display: block; margin-top: .45em; padding: .55em .4em; background: #7cb228; color: #fff !important; font-size: 1.45em; letter-spacing: .02em; text-decoration: none !important; border-radius: 6px; white-space: nowrap; } #gj-aside.altcolor .j-header h3 a[href^="tel:"]:hover, #gj-aside.altcolor .j-header h3 a[href^="tel:"]:focus { background: #6a9c1f; } @media (max-width: 1024px) { #gj-aside.altcolor .j-header h3 a[href^="tel:"] { font-size: 1.6em; padding: .7em .5em; } } /* ---- phone call-to-action directly under the top navigation (phones/tablets only) ---- */ @media (max-width: 1024px) { #mobile-nav .mobile-phone-cta { display: block; background: #fff; border-top: 2px solid #a5c93a; padding: .7em .8em .8em; text-align: center; } #mobile-nav .mobile-phone-cta span { display: block; color: #444; font-weight: bold; font-size: .95em; margin-bottom: .4em; } #mobile-nav .mobile-phone-cta a { display: block; background: #7cb228; color: #fff !important; font-size: 1.5em; font-weight: bold; padding: .6em .5em; border-radius: 6px; text-decoration: none !important; white-space: nowrap; } /* keep the CTA visible even when mobile.js has collapsed the menu list */ #mobile-nav.js-collapsed .mobile-phone-cta { display: block; } }