/* * Responsive layer for the maxnadig theme. * * The base layout is a fixed 960px desktop design. It stays intact down to the * point where 960px no longer fits the viewport; below that a fluid, single-column * layout with a hamburger nav takes over. * * Breakpoints (additive overrides only - the desktop layout itself is untouched): * <= 1199px hide the decorative .teaser_statistic (it bleeds ~70px past the * 960px layout and only clears the centered margin from ~1100px up, * so it would force horizontal scroll between ~960 and ~1100px) * <= 991px fluid container + hamburger nav + stacked content; the three home * info boxes stay three-across as cards * <= 768px phone typography, tighter gutters, info boxes stack single-column * * Result: full desktop incl. statistic >=1200px, desktop layout without the * statistic 992-1199px (e.g. tablet landscape), fluid/hamburger <=991px. */ /* Hamburger button: hidden on desktop, shown inside the fluid layer */ .menu-toggle { display: none; } /* Single-mandate thumbnail: former inline style as a class (desktop unchanged, overridable below) */ .mandate-single-thumb { position: absolute; display: block; top: 32px; right: 0; } /* ============================================================ HIDE DECORATIVE STATISTIC (<= 1199px) */ @media (max-width: 1199px) { .teaser_statistic { display: none; } } /* ============================================================ FLUID / HAMBURGER (<= 991px) */ @media (max-width: 991px) { /* --- Fluid container, capped at the native 960px so images never upscale --- */ #page_wrapper { width: auto; max-width: 960px; margin: 0 auto; padding: 0 24px; } #content_container { width: 100%; margin: 24px 0 0; padding-bottom: 48px; float: none; } #home_page_content { margin-left: 0 !important; } /* --- Scale media to the container --- */ img, iframe, video, embed, object { max-width: 100%; height: auto; } /* --- Header / logo --- */ #header { height: auto; } #header #logo { position: relative; width: 100%; max-width: 320px; height: 90px; background-size: contain; background-position: left center; } #header #mainmenu { position: static; float: none; width: 100%; } /* --- Hamburger + navigation --- */ /* z-index keeps the button above #logo (z-index:10 from style.css): the logo anchor is full-width (capped at 320px) and on narrow phones its right edge overlaps the right-aligned button, intercepting the tap without this. */ .menu-toggle { display: block; position: absolute; top: 21px; right: 0; z-index: 20; width: 48px; height: 48px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font-size: 30px; line-height: 48px; color: #494848; text-align: center; } .menu-hauptmenue-container { display: none; } #mainmenu.is-open .menu-hauptmenue-container { display: block; } ul.hauptmenue { float: none; display: block; padding: 8px 0 16px; margin: 0; text-align: left; } ul.hauptmenue > li { float: none; display: block; margin: 0; padding: 0; border-top: 1px solid #eee; background: none !important; } ul.hauptmenue > li > a { display: block; padding: 14px 2px; font-size: 22px; } /* Hide the active/hover arrow (menu_arrow_down.png) in the mobile menu */ ul.hauptmenue > li:hover, ul.hauptmenue > li.current-menu-item, ul.hauptmenue > li.current-menu-parent { background: none !important; } /* Only sub-menu: permanently expanded (no hover/tap needed) */ ul.hauptmenue > li > ul.sub-menu, ul.hauptmenue > li:hover > ul.sub-menu { position: static; display: block; left: auto; top: auto; min-width: 0; box-shadow: none; white-space: normal; padding: 0 0 8px 22px; background: none; } ul.hauptmenue > li > ul.sub-menu > li { margin: 0; } ul.hauptmenue > li > ul.sub-menu > li > a { display: block; padding: 10px 2px; font-size: 18px; } /* --- Home hero / teaser --- */ .home_image { height: auto; } .home_image img { position: relative; width: 100%; height: auto; } .teaser_banner { position: relative; width: 100%; height: auto; bottom: auto; left: auto; padding: 16px; } .teaser_banner h1 { font-size: 28px; letter-spacing: 2px; } /* --- Home info boxes: flex row, three across as cards (justify reads badly when narrow) --- */ div.box { width: 100%; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 30px; } div.bottom_box { float: none; width: calc((100% - 60px) / 3); margin: 0; text-align: left; } /* --- Team / mandate list --- */ .page_title { margin-top: 24px; } .post_content_position { margin-top: 32px; } .post_image { float: none; width: auto; max-width: 150px; margin-bottom: 12px; } .post_content_text { float: none; width: 100%; padding-left: 0; } .mandate_content_text { width: 100% !important; float: none !important; margin-left: 0 !important; } /* --- Single mandate / taxonomy --- */ .mandate-single-thumb { position: static; margin: 16px 0; } #subcategoryview li { display: block; padding-left: 0; } /* Content list bullet (PostBullets.png) sits lower on small screens (desktop keeps 3px) */ ul li { background-position: left 12px; } /* --- Contact form --- */ .contact_left, .contact_right { float: none; width: 100%; } .contact_text { float: none; width: auto; margin-bottom: 6px; } .contact_input { float: none; margin-left: 0; margin-bottom: 16px; } .contact_input input, .contact_input textarea { width: 100%; } .contact_submit_button { float: none; width: 100%; } /* --- Footer: static instead of fixed --- */ #footer { position: static; width: 100%; height: auto; background: #f4f4f4; } .footer_container { width: auto; height: auto; padding: 14px 16px; } .footer_left_side, .footer_right_side { position: static; display: block; right: auto; padding: 2px 0; } .small_icon { display: none; } } /* ============================================================ PHONE (<= 768px) */ @media (max-width: 768px) { /* Tighter gutters */ #page_wrapper { padding: 0 16px; } /* Info boxes stack single-column (three-across cards get too narrow here) */ div.bottom_box { width: 100%; } /* Typography scaled down for small screens */ body { font-size: 16px; } .page_title { font-size: 28px; margin-top: 16px; } .teaser_banner h1 { font-size: 22px; letter-spacing: 1px; } }