.menuNavigation__item { display: flex; flex-direction: column; justify-content: center; flex: 1; border-radius: 0; line-height: 1.4em; min-height: 72px; } .menuNavigation__item.disabled { opacity: .5; } @media (max-width: 870px) { .menuNavigation__item.btn.btn-outline-dark { flex: 0 0 calc(100% / 3 - 3px); min-height: 72px; } } @media (max-width: 450px) { .menuNavigation__item.btn.btn-outline-dark { flex: 0 0 calc(100% / 2 - 3px); } } /* Fokus-Sichtbarkeit wird NICHT unterdrückt -> Browser-Default bleibt erhalten. */ /* === 3. Icon-Größenbegrenzung: max. 40px Breite ============================ * SVG-Icons (Partials/Icons.html) und Iconfont-Glyphen werden hart auf 40px * Breite gedeckelt; das Seitenverhältnis bleibt erhalten. * Scope auf die Menü-Container, damit fremde Seiten-SVGs unberührt bleiben. * (.menuModal / .menuItem__popover sind die per Bootstrap an gehängten * Overlays, in denen Markierungs-/CO2-Icons ebenfalls vorkommen.) * ========================================================================== */ #menuContainer svg, .menuItem__marking__icon svg, .menuModal svg, .menuItem__popover svg { max-width: 40px; height: auto; } /* Iconfont: Glyph-Breite ist an die Schriftgröße gekoppelt; Deckel bei 40px. */ .menuicon { font-size: min(1em, 40px); } /* === 4. Iconfont (Fontello) – vollständig inkl. Farben ===================== * Unverändert aus menu_redesign.css übernommen (dort war die Definition). * Ohne diesen Block würden u. a. das CO2-Badge * (.menuicon.menuItem__co2icon.menuicon-co2e-X) und die Markierungs-Fallbacks * () nicht rendern. * ========================================================================== */ /* CO2e-Stufenfarben (A=klimafreundlich … E=hoch) – von den Farbregeln benötigt */ :root { --menu-co2-a: #2f8f57; --menu-co2-b: #6fa53b; --menu-co2-c: #d4a017; --menu-co2-d: #df7a3d; --menu-co2-e: #cf4a3c; --lightgrey: #f9f9f9; --grey: #eeeeee; --menu-accent: #ff5532; --menu-ink: #1f2225; --menu-bg-accent: #ECB49C; } @font-face { font-family: "menu-iconfont"; font-style: normal; font-weight: 400; font-display: swap; src: url("../Fonts/iconfont-stwbi/fontello.woff2") format("woff2"), url("../Fonts/iconfont-stwbi/fontello.woff") format("woff"), url("../Fonts/iconfont-stwbi/fontello.ttf") format("truetype"); } .menuicon { font-family: "menu-iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .menuicon-co2e-a::before { content: "\e800"; } .menuicon-co2e-b::before { content: "\e801"; } .menuicon-co2e-c::before { content: "\e802"; } .menuicon-co2e-d::before { content: "\e803"; } .menuicon-co2e-e::before { content: "\e804"; } .menuicon-gefluegel::before { content: "\e805"; } .menuicon-lamm::before { content: "\e806"; } .menuicon-rind::before { content: "\e807"; } .menuicon-schwein::before { content: "\e808"; } .menuicon-wild::before { content: "\e809"; } .menuicon-alkohol::before { content: "\e80a"; } .menuicon-fisch::before { content: "\e80b"; } .menuicon-gelantine-rind::before { content: "\e80c"; } .menuicon-gelantine-schwein::before { content: "\e80d"; } .menuicon-krustentiere::before { content: "\e80e"; } .menuicon-weichtiere::before { content: "\e80f"; } .menuicon-vegan::before { content: "\e810"; } .menuicon-vegetarisch::before { content: "\e811"; } /* vegan/vegetarisch farblich hervorheben (wie Vorlage) */ #menuContainer .menuItem__marking--vegan .menuItem__marking__icon, #menuContainer .menuItem__marking--vegetarisch .menuItem__marking__icon { color: var(--menu-co2-a); } .menuItem { position: relative; } /* CO2e – Stufen-Icon aus dem Iconfont, farbcodiert */ .menuItem__co2icon--A, .menuicon-co2e-a { color: var(--menu-co2-a); } .menuItem__co2icon--B, .menuicon-co2e-b { color: var(--menu-co2-b); } .menuItem__co2icon--C, .menuicon-co2e-c { color: var(--menu-co2-c); } .menuItem__co2icon--D, .menuicon-co2e-d { color: var(--menu-co2-d); } .menuItem__co2icon--E, .menuicon-co2e-e { color: var(--menu-co2-e); } .menuNavigation__nav { display: flex; gap: 3px; flex-wrap: wrap; } .menuDay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 21px; } .menuDay__headline { grid-column: -1/1; margin-top: 40px; } .menuDay > :first-child { margin-top: 0; } .menuDay .menuItem { grid-column: span 2; background-color: var(--lightgrey); display: flex; flex-direction: column; justify-content: space-between; } .menuDay .menuItem.menuLine--Sherz, .menuDay .menuItem.menuLine--Sgreen, .menuDay .menuItem.menuLine--Skuli, .menuDay .menuItem.menuLine--Spundw { grid-column: span 3; } @media (max-width: 768px) { .menuDay .menuItem.menuLine--Sherz, .menuDay .menuItem.menuLine--Sgreen, .menuDay .menuItem.menuLine--Skuli, .menuDay .menuItem.menuLine--Spundw { grid-column: span 6; } } @media (max-width: 1050px) { .menuDay .menuItem { grid-column: span 3; } } @media (max-width: 768px) { .menuDay .menuItem { grid-column: span 6; } } .menuDay .menuItem.menuLine--MBeilageA { grid-column: span 3; } .menuDay .menuItem.menuLine--MBeilageB { grid-column: span 3; } @media (max-width: 768px) { .menuDay .menuItem.menuLine--MBeilageA { grid-column: span 6; } .menuDay .menuItem.menuLine--MBeilageB { grid-column: span 6; } } .menuItem__content { padding: 56px 17px 35px 17px; } .menuItem__marking figcaption { display: none; } .menuItem__footer p { margin-bottom: 0; } .menuItem__footer__toggle { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-left: 17px; padding-bottom: 38px; } .menuItem__price__label { display: none; } .menuItem__price { display: flex; } .menuItem__price__one, .menuItem__price__two, .menuItem__price__three { flex: 1; text-align: center; } .menuItem__price__one .menuItem__price__value { background-color: var(--bs-white); } .menuItem__price__tw o.menuItem__price__value { background-color: var(--lightgrey); } .menuItem__price__three .menuItem__price__value { background-color: var(--grey); } .menuItem__price__for { display: block; font-weight: 500; } .menuItem__price__value { display: block; border-top: 1px solid #000; border-bottom: 1px solid #000; } .menuItem__footer__toggle button { appearance: none; margin: 0; border: 0; padding: 0; text-align: left; background-color: transparent; grid-column: span 1; } .menuItem__footer__toggle button.menuItem__modalbutton { font-size: 16px; } .menuItem__footer__toggle button.menuItem__modalbutton span { text-decoration: underline; } .menuItem__footer__toggle button.menuItem__modalbutton:hover { color: var(--menu-accent); } .menuItem__sidedish__content>a { font-size: 16px; } .menuItem__sidedish__content>a:hover { color: var(--menu-accent); } .menuitem__footer__infoline { grid-column: span 1; display: flex; gap: 20px; justify-content: center; } .menuitem__footer__infoline .menuItem__co2icon { font-size: 30px; } .menuItem__headline { color: var(--menu-accent); margin-bottom: 10px; line-height: 1.2em; } .menuItem__line { display: none; } .modal { --bs-modal-width: 80vw; --bs-modal-border-radius: 0; --bs-modal-inner-border-radius: 0; --bs-modal-padding: 35px; } .modal-backdrop { --bs-backdrop-opacity: 1; } .modal-dialog-scrollable .modal-content { background: transparent; } .modal-dialog-scrollable .modal-body { overflow-y: auto; background: #fff; } .modal-content .modal-header { background-color: transparent; } .modal-content .modal-header .h3 { color: var(--bs-white); } .modal-content .menuItem__headline { color: var(--bs-black); } .modal-content .menuItem__head { display: flex; justify-content: space-between; margin-bottom: 40px; ; } .modal-content .menuItem__head button { border: 0; margin: 0; appearance: none; border: 0; border-radius: 0; background-color: transparent; } .menuItem__allergens { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 80px; } .menuItem__allergens .custombadge { padding: 5px 10px; background-color: var(--bs-black); color: var(--bs-white); font-weight: 500; } .menuItem__allergens .custombadge .custombadge__code { font-style: normal; } .menuModal__co2-wrapper { display: flex; } .menuModal__co2-rating { flex: 0 0 60px; font-size: 40px; display: flex; align-items: center; } .menuModal__co2-note { font-size: 16px; margin-bottom: 0; } .menuItem__nutritionlist { display: table } .menuItem__nutritionlist div { display: table-row; } .menuItem__nutritionlist div dt { display: table-cell; padding: 5px 40px 5px 5px; border-bottom: 1px solid var(--bs-black); } .menuItem__nutritionlist div dd { display: table-cell; border-bottom: 1px solid var(--bs-black); text-align: center; padding: 5px; } #menuContainer .menuMensaSelect { margin-bottom: 80px; } .menuItem__sidedish__content button { appearance: none; margin: 0; padding: 0; border: 0; background-color: transparent; } ul.menuItem__sidedishes { margin: 0; padding: 0; list-style-type: none; } .menuItem__sidedish { display: flex; justify-content: space-between; column-gap: 20px; } .menuItem__sidedish__label { display: flex; align-self: baseline; } ul li.menuItem__sidedish { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--bs-black); } ul li.menuItem__sidedish:last-child { border: 0; } .menuItem__sidedish__content { display: flex; align-items: baseline; align-self: center; gap: 10px; } .menuItem__sidedish__content>a { margin-right: 10px; white-space: nowrap; } .popover { --bs-popover-max-width: 400px; } .menuItem__popover { font-size: 16px; ; } .menuItem__markings figure { margin: 0; } .modal-header .btn-close { background: url(../Icons/close.svg) 0 0 no-repeat; background-size: contain; } .btn-close { --bs-btn-close-opacity: 1; } .menuItem__markings.menuItem__markings--relative { display: flex; } .menuItem__markings { display: flex; } .menuDay .menuItem.menuLine--MAktion { grid-column: span 6; background-color: var(--menu-bg-accent); } .menuDay .menuItem.menuLine--MAktion .menuItem__content { margin-left: auto; margin-right: auto; max-width: 875px; width: 100%; } .menuDay .menuItem.menuLine--MAktion .menuItem__sidedish { flex-direction: column; gap: 20px; } .menuDay .menuItem.menuLine--MAktion .menuItem__sidedish__content { align-self: flex-start; } .menuDay .menuItem.menuLine--MAktion .menuItem__price__one .menuItem__price__value, .menuDay .menuItem.menuLine--MAktion .menuItem__price__two .menuItem__price__value, .menuDay .menuItem.menuLine--MAktion .menuItem__price__three .menuItem__price__value { background-color: transparent; } .menuDay .menuItem.menuLine--MAktion .menuItem__head { display: none; } .menuItem__sidedish--innerprice { flex-wrap: wrap; } .menuItem__sidedish--innerprice .menuItem__price { flex: 0 0 100%; } .menuDay .menuItem.menuLine--MKids { grid-column: span 6; } .menuDay .menuItem.menuLine--MKids .menuItem__sidedishes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; } @media (max-width: 768px) { .menuDay .menuItem.menuLine--MKids .menuItem__sidedishes { grid-template-columns: 1fr; } } .menuDay__headline--action { margin-bottom: -40px !important; position: relative; z-index: 1; margin-left: -10px; } .menuDay .menuItem.menuLine--Sherz .menuItem__content, .menuDay .menuItem.menuLine--Sgreen .menuItem__content, .menuDay .menuItem.menuLine--Skuli .menuItem__content, .menuDay .menuItem.menuLine--Spundw .menuItem__content { padding-bottom: 0; } .menuDay .menuItem.menuLine--Sherz ul li.menuItem__sidedish, .menuDay .menuItem.menuLine--Sgreen ul li.menuItem__sidedish, .menuDay .menuItem.menuLine--Skuli ul li.menuItem__sidedish, .menuDay .menuItem.menuLine--Spundw ul li.menuItem__sidedish { padding-bottom: 0; border-bottom: 0; } .menuDay .menuItem.menuLine--Sherz ul li.menuItem__sidedish .menuItem__price, .menuDay .menuItem.menuLine--Sgreen ul li.menuItem__sidedish .menuItem__price, .menuDay .menuItem.menuLine--Skuli ul li.menuItem__sidedish .menuItem__price, .menuDay .menuItem.menuLine--Spundw ul li.menuItem__sidedish .menuItem__price { flex: 0 0 calc(100% + 34px); margin: 0 -17px; } .menuDay .menuItem.menuLine--Sherz ul li.menuItem__sidedish .menuItem__price p, .menuDay .menuItem.menuLine--Sgreen ul li.menuItem__sidedish .menuItem__price p, .menuDay .menuItem.menuLine--Skuli ul li.menuItem__sidedish .menuItem__price p, .menuDay .menuItem.menuLine--Spundw ul li.menuItem__sidedish .menuItem__price p { margin-bottom: 0; } .menuItem__text { font-size: 0.8em; line-height: 1.5; } .menuItem__text.menuItem__text--lead { font-size: 1em; } .menuNavigation { margin-bottom: 50px; } .menuDay .menuItem.menuLine--MBeilageA, .menuDay .menuItem.menuLine--MBeilageB { background-color: transparent; justify-content: flex-start; } .menuDay .menuItem.menuLine--MBeilageA .menuItem__content, .menuDay .menuItem.menuLine--MBeilageA .menuItem__footer, .menuDay .menuItem.menuLine--MBeilageB .menuItem__content, .menuDay .menuItem.menuLine--MBeilageB .menuItem__footer { background-color: var(--lightgrey); } .modal-backdrop.show { opacity: var(--bs-backdrop-opacity); --bs-backdrop-opacity: 0.85; } .menuItem__text__note { display: block; line-height: 1.5em; margin-top: 5px; } .menuItem.menuItem--sidedish.menuLine--Sherz li.menuItem__sidedish, .menuItem.menuItem--sidedish.menuLine--Sgreen li.menuItem__sidedish, .menuItem.menuItem--sidedish.menuLine--Skuli li.menuItem__sidedish, .menuItem.menuItem--sidedish.menuLine--Spundw li.menuItem__sidedish { display: flex; flex-wrap: wrap; } .menuItem.menuItem--sidedish.menuLine--Sherz li.menuItem__sidedish .menuItem__price, .menuItem.menuItem--sidedish.menuLine--Sgreen li.menuItem__sidedish .menuItem__price, .menuItem.menuItem--sidedish.menuLine--Skuli li.menuItem__sidedish .menuItem__price, .menuItem.menuItem--sidedish.menuLine--Spundw li.menuItem__sidedish .menuItem__price { margin-top: 10px !important; } .menuItem.menuItem--sidedish.menuLine--Sherz li.menuItem__sidedish .menuItem__sidedish__label, .menuItem.menuItem--sidedish.menuLine--Sgreen li.menuItem__sidedish .menuItem__sidedish__label, .menuItem.menuItem--sidedish.menuLine--Skuli li.menuItem__sidedish .menuItem__sidedish__label, .menuItem.menuItem--sidedish.menuLine--Spundw li.menuItem__sidedish .menuItem__sidedish__label { flex:0 0 50%; } .menuItem.menuItem--sidedish.menuLine--Sherz li.menuItem__sidedish .menuItem__sidedish__content, .menuItem.menuItem--sidedish.menuLine--Sgreen li.menuItem__sidedish .menuItem__sidedish__content, .menuItem.menuItem--sidedish.menuLine--Skuli li.menuItem__sidedish .menuItem__sidedish__content, .menuItem.menuItem--sidedish.menuLine--Spundw li.menuItem__sidedish .menuItem__sidedish__content { flex:0 0 40%; } /* ========================================================================== Suppen-Modal (SoupModal) – Beilagen einzeilig Ergänzt für v3.4.2. .menuItem__additionalprice war bisher ungestylt, wodurch die Aufpreise (S/B/G) im Modal umgebrochen sind. Diese Regeln halten je Beilage Name, Details, Aufpreise und Markierung auf einer Zeile. ========================================================================== */ .menuModal .menuItem__sidedish__content { flex-wrap: nowrap; } .menuModal .menuItem__additionalprice { white-space: nowrap; } .menuModal .menuItem__sidedish__content > a { flex: auto; } .menuItem__sidedish__content button.button-outline.button-outline--small { font-size: 16px; text-decoration: underline; } .menuModal ul li.menuItem__sidedish { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bs-black); } .menuModal .menuItem__additionalprice__item { margin-right: 20px; display: inline-block; } @media (min-width: 930px) { .menuDay .menuItem.menuLine--MSuppe { grid-column: span 6; } .menuDay .menuItem.menuLine--MSuppe .menuItem__content ul.menuItem__sidedishes { display: flex; flex-wrap: wrap; gap: 30px; } .menuDay .menuItem.menuLine--MSuppe .menuItem__content ul.menuItem__sidedishes > li { flex: 0 0 calc(50% - 15px); border-bottom: 0; } }