/* ================================ EBZ Fullscreen Menu Grid ================================ */ /* ================================ GRID LINKS ================================ */ .fullscreen-menu-card .menu-grid-page-link { color: #121b35; font-size: clamp(1.0625rem, 1rem + 0.2778vw, 1.3125rem); line-height: 1.35; letter-spacing: 0; font-weight: 200 !important; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: normal; word-break: normal; width: fit-content; } .fullscreen-menu-card .menu-grid-page-link:hover { font-weight: 300 !important; } /* ================================ GRID LINKS Arrow ================================ */ .fullscreen-menu-card .menu-grid-page-link .et_pb_link_text::after { content: "\2192"; display: inline-block; margin-left: 0; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-0.35em); vertical-align: top; transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease, transform 0.25s ease; } .fullscreen-menu-card .menu-grid-page-link:hover .et_pb_link_text::after { max-width: 1.5em; margin-left: 0.4em; opacity: 1; transform: translateX(0); } /* ================================ GRID HEADINGS ================================ */ .fullscreen-menu-card .menu-grid-heading-link { width: fit-content; } /* ================================ GRID HEADINGS Arrow ================================ */ .fullscreen-menu-card .menu-grid-heading-link .et_pb_module_header::after { content: "\2192"; display: inline-block; margin-left: 0; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-0.35em); vertical-align: top; transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease, transform 0.25s ease; } .fullscreen-menu-card .menu-grid-heading-link:hover .et_pb_module_header::after { max-width: 1.5em; margin-left: 0.4em; opacity: 1; transform: translateX(0); } /* ================================ GRID ITEMS ================================ */ .fullscreen-menu-card { position: relative; min-width: 0; width: auto !important; max-width: none !important; margin: 0 !important; } /* ================================ CARD SIZE: LARGE 4 von 12 Spalten = 1/3 ================================ */ .fullscreen-menu-card-large { grid-column: span 4; } /* ================================ CARD SIZE: MEDIUM 3 von 12 Spalten = 1/4 ================================ */ .fullscreen-menu-card-medium { grid-column: span 3; } /* ================================ CARD SIZE: SMALL 3 von 12 Spalten = 1/4 ================================ */ .fullscreen-menu-card-small { grid-column: span 3; } /* ================================ MOBILE TOGGLE Standardmäßig unsichtbar ================================ */ .fullscreen-menu-card-toggle { display: none; } /* ================================ BREAKPOINT: COMPACT DESKTOP Sidebar über dem Menü-Grid ================================ */ @media (max-width: 1450px) { .fullscreen-menu-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; /*row-gap: clamp(40px, 5vw, 72px) !important;*/ } .fullscreen-menu-layout > .fullscreen-menu-sidebar, .fullscreen-menu-layout > .fullscreen-menu-content { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; flex: none !important; } .fullscreen-menu-content { padding-top: 0 !important; } } /* ================================ BREAKPOINT: TABLET / SMALL DESKTOP Menü-Grid auf 2 Spalten ================================ */ @media (max-width: 1200px) { .fullscreen-menu-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; width: 100% !important; max-width: none !important; } .fullscreen-menu-grid > .fullscreen-menu-card, .fullscreen-menu-grid > .fullscreen-menu-card-large, .fullscreen-menu-grid > .fullscreen-menu-card-medium, .fullscreen-menu-grid > .fullscreen-menu-card-small { grid-column: span 1 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } } /* ================================ BREAKPOINT: MOBILE Einspaltig + Collapse ================================ */ @media (max-width: 800px) { /* Linken Menü-/Editorialblock ausblenden */ .fullscreen-menu-left { display: none !important; } /* Grid auf eine Spalte reduzieren */ .fullscreen-menu-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; width: 100% !important; max-width: none !important; } /* Jede Karte volle Breite */ .fullscreen-menu-grid > .fullscreen-menu-card, .fullscreen-menu-grid > .fullscreen-menu-card-large, .fullscreen-menu-grid > .fullscreen-menu-card-medium, .fullscreen-menu-grid > .fullscreen-menu-card-small { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } /* ================================ COLLAPSE BUTTON ================================ */ .fullscreen-menu-card-toggle { position: absolute; top: 16px; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #121b35; cursor: pointer; z-index: 2; } /* Plus / Minus über Pseudoelemente */ .fullscreen-menu-card-toggle::before, .fullscreen-menu-card-toggle::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } .fullscreen-menu-card-toggle::before { transform: rotate(0deg); } .fullscreen-menu-card-toggle::after { transform: rotate(90deg); } /* Geöffnet: aus Plus wird Minus */ .fullscreen-menu-card.is-open .fullscreen-menu-card-toggle::after { transform: rotate(0deg); opacity: 0; } /* ================================ COLLAPSE CONTENT ================================ */ .fullscreen-menu-card-links[hidden] { display: none !important; } }