@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"); :root { --main-color: #76b82a; --sub-color: #76b82a; --text-color: #121212; --border-radius: 12px; --border-grey: #e3e3e3; --standard-shadows: 0px 7px 20px -4px rgba(72, 115, 25, 0.16), 0px 6px 12px -6px rgba(72, 115, 25, 0.24); /* Data-URLs für die SVG-Icons */ --svg-close: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%201C24.2843%201%2031%207.71573%2031%2016C31%2024.2843%2024.2843%2031%2016%2031C7.71573%2031%201%2024.2843%201%2016C1%207.71573%207.71573%201%2016%201Z%22%20stroke%3D%22%23121212%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.8281%2012.1716L12.1713%2019.8284%22%20stroke%3D%22%23121212%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.8281%2019.8284L12.1713%2012.1716%22%20stroke%3D%22%23121212%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --svg-info: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%201.25C13.2802%201.25%2016.75%204.71979%2016.75%209C16.75%2013.2802%2013.2802%2016.75%209%2016.75C4.71979%2016.75%201.25%2013.2802%201.25%209C1.25%204.71979%204.71979%201.25%209%201.25Z%22%20stroke%3D%22%2376B82A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.711%208.309C9.711%208.617%209.612%209.14867%209.414%209.904C9.216%2010.652%209.117%2011.1433%209.117%2011.378C9.117%2011.6053%209.15%2011.719%209.216%2011.719C9.26%2011.719%209.42867%2011.6493%209.722%2011.51L9.854%2011.444L10.041%2011.829C9.975%2011.8877%209.887%2011.961%209.777%2012.049C9.667%2012.137%209.46167%2012.258%209.161%2012.412C8.86033%2012.5587%208.58167%2012.632%208.325%2012.632C8.06833%2012.632%207.86667%2012.555%207.72%2012.401C7.57333%2012.2397%207.5%2012.027%207.5%2011.763C7.5%2011.4917%207.59167%2011.015%207.775%2010.333C7.95833%209.64367%208.05%209.19633%208.05%208.991C8.05%208.683%207.95467%208.39333%207.764%208.122L7.665%207.99L7.676%207.847C8.06467%207.737%208.69533%207.682%209.568%207.682C9.66333%207.792%209.711%208.001%209.711%208.309ZM8.457%206.483C8.31033%206.33633%208.237%206.142%208.237%205.9C8.237%205.658%208.336%205.44533%208.534%205.262C8.73933%205.07867%208.974%204.987%209.238%204.987C9.502%204.987%209.70733%205.06033%209.854%205.207C10.0007%205.35367%2010.074%205.548%2010.074%205.79C10.074%206.02467%209.96767%206.23367%209.755%206.417C9.54967%206.60033%209.31867%206.692%209.062%206.692C8.80533%206.692%208.60367%206.62233%208.457%206.483Z%22%20fill%3D%22%2376B82A%22%2F%3E%3C%2Fsvg%3E"); --svg-check: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%201C24.2843%201%2031%207.71573%2031%2016C31%2024.2843%2024.2843%2031%2016%2031C7.71573%2031%201%2024.2843%201%2016C1%207.71573%207.71573%201%2016%201Z%22%20fill%3D%22%2376B82A%22%20stroke%3D%22%2376B82A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2016L13.9293%2019.9293C13.9683%2019.9683%2014.0317%2019.9683%2014.0707%2019.9293L22%2012%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --svg-uncheck: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20version%3D%221.1%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m16%201c8.2843%200%2015%206.7157%2015%2015%200%208.2843-6.7157%2015-15%2015-8.2843%200-15-6.7157-15-15%200-8.2843%206.7157-15%2015-15z%22%20fill%3D%22none%22%20stroke%3D%22%2376B82A%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --svg-remove: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20version%3D%221.1%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m16%201c8.2843%200%2015%206.7157%2015%2015%200%208.2843-6.7157%2015-15%2015-8.2843%200-15-6.7157-15-15%200-8.2843%206.7157-15%2015-15z%22%20fill%3D%22%23ff6c67%22%20stroke%3D%22%23ff6c67%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m10%2016%2012%200.02992%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --svg-plus: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.6693%209.16669V20.1667%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20.1641%2014.6666L9.16406%2014.6666%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --svg-minus: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.1641%2014.6666L9.16406%2014.6666%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --svg-vor: url('data:image/svg+xml,'); --svg-pfand: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%3Csvg%20width%3D%22170.39mm%22%20height%3D%22170.39mm%22%20version%3D%221.1%22%20viewBox%3D%220%200%20170.39%20170.39%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate(-19.54%20-31.445)%22%3E%3Cpath%20d%3D%22m155.82%2065.794c-18.696-18.696-33.992-34.073-33.992-34.171%200-0.09806%2015.323-0.17828%2034.052-0.17828h34.052v34.171c0%2018.794-0.0269%2034.171-0.0598%2034.171s-15.356-15.297-34.052-33.993z%22%20fill%3D%22%230047b1%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m19.54%2065.675v-34.23h34.052c18.729%200%2034.052%200.08051%2034.052%200.17891%200%200.0984-15.323%2015.502-34.052%2034.23l-34.052%2034.051z%22%20fill%3D%22%230047b1%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m112.91%20139.55c-0.21112-0.14763-0.28896-4.6523-0.33788-19.555-0.0593-18.074-0.0905-19.423-0.46852-20.261-0.22271-0.49387-0.6128-1.1192-0.86687-1.3896-0.72616-0.77297-2.4159-1.3799-4.1343-1.4851l-1.5768-0.0965-0.0646-3.5842c-0.0946-5.2423%200.63643-10.556%201.998-14.524%200.79644-2.3209%202.3783-5.9247%204.1721-9.5048%201.8568-3.706%202.0756-4.7199%201.1132-5.1584-0.68904-0.31395-0.70164-0.3829-0.61587-3.3698l0.0704-2.4506h4.9175c3.7409%200%204.9367%200.06737%204.9979%200.28157%200.0443%200.15486%200.049%201.4084%200.0106%202.7857-0.0671%202.4051-0.0915%202.514-0.61945%202.7546-0.89538%200.40796-0.73648%201.5187%200.56294%203.9351%202.3867%204.4384%204.8776%2010.519%205.6458%2013.782%201.0996%204.671%201.1489%206.0763%201.075%2030.635-0.0557%2018.501-0.12814%2023.151-0.37191%2023.872-0.43865%201.2982-1.7191%202.4752-3.1878%202.9303-0.96152%200.29796-2.422%200.40536-6.6388%200.48817-2.9734%200.0584-5.5296%200.0198-5.6804-0.0856z%22%20fill%3D%22%2309f%22%20stroke-width%3D%22.85136%22%2F%3E%3Cpath%20d%3D%22m88.408%20144.81c-1.488-0.48108-2.2769-0.98072-3.1393-1.9882-1.5305-1.788-1.4993-1.3464-1.429-20.254l0.06317-16.982%200.50734-1.0898c0.27904-0.59941%200.57163-1.5117%200.6502-2.0273%200.07857-0.5156%200.2428-1.0642%200.36495-1.219%200.17162-0.2176%202.4648-0.28157%2010.092-0.28157%207.6494%200%209.9112%200.0633%2010.052%200.28157%200.0998%200.15487%200.29572%200.7884%200.43547%201.4078%200.13976%200.61945%200.47261%201.7152%200.73966%202.435%200.4837%201.3037%200.48531%201.3741%200.42253%2018.471-0.0628%2017.105-0.0646%2017.165-0.55013%2018.063-0.66229%201.2251-1.7675%202.2394-3.117%202.8605-1.0843%200.49903-1.3698%200.52013-7.6587%200.56595-4.8394%200.0352-6.7659-0.0279-7.4334-0.24371z%22%20fill%3D%22%2309f%22%20stroke-width%3D%22.85136%22%2F%3E%3Cg%20fill%3D%22%230047b1%22%3E%3Cpath%20d%3D%22m60.333%20171.07c-11.522-9.5958-15.398-12.835-16.281-13.608l-0.8814-0.77079%2011.678-9.7287c6.4227-5.3508%2011.761-9.7287%2011.863-9.7287s0.18505%202.9922%200.18505%206.6494v6.6494l77.601-0.1214%201.3334-0.50781c1.8961-0.72214%203.3052-1.6889%204.7743-3.2758%202.2638-2.4452%203.4196-5.8221%203.17-9.2619-0.3838-5.2887-3.5414-9.1397-8.7247-10.641-0.88081-0.25507-2.6159-0.38732-6.128-0.46708l-4.8993-0.11127v-12.399l5.4624%200.12888c6.9291%200.16349%209.4933%200.65968%2013.346%202.5826%202.5055%201.2504%203.8235%202.1794%205.8439%204.1191%206.6324%206.3674%209.245%2015.865%206.741%2024.506-2.2694%207.8313-8.2597%2014.069-16.015%2016.677-3.518%201.1828-2.3226%201.1515-43.903%201.1515h-38.602v6.645c0%203.7111-0.08814%206.645-0.19963%206.645-0.10979%200-2.9734-2.3101-6.3635-5.1335z%22%20stroke-width%3D%22.85136%22%2F%3E%3Cpath%20d%3D%22m160.4%20187.07v-14.764h29.527v29.528h-29.527z%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m19.54%20187.07v-14.764h29.527v29.528h-29.527z%22%20stroke-width%3D%22.9%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } a { color: var(--sub-color); } body { font-size: 16px; font-family: "Nunito", "Open Sans", sans-serif; font-weight: 500; font-optical-sizing: auto; color: var(--text-color); } body:has(.shopping-cart-preview:not(.dn-i)) { /* Platz für den überlagerten Footer, wenn Produkte im Wagen liegen */ padding-bottom: 64px; } .item-single-premium .main .top { justify-content: center; } .item-single-premium .main > .top > .left > .title-company { font-size: 26px; font-weight: 900; line-height: 32px; } .item-single-premium .main > .services-title { display: flex; justify-content: center; font-family: "Grand Hotel", cursive; font-style: normal; font-weight: 400; font-size: 26px; line-height: 30px; margin-top: 0; margin-bottom: 0; padding: 10px 0 12px 0; border-bottom: 1px var(--sub-color) solid; } .item-single-premium .services-cat-nav > .inr { padding: 25px 0; } .products-cat-tree .items { margin: 0 10px; border-top: 1px #ddd solid; } .products-cat-tree .items > .item { border-bottom: 1px #ddd solid; position: relative; } .products-cat-tree .items > .item::after { content: ""; display: block; position: absolute; top: 16px; right: 20px; height: 32px; width: 32px; cursor: pointer; background-image: var(--svg-vor); transform: rotate(0deg); transition: transform 0.15s; } .products-cat-tree .items > .item:has(div.childs.open)::after { transform: rotate(-90deg); } .products-cat-tree .items > .item > .inr { padding: 0; } .products-cat-tree .items > .item > .inr > .background { display: none; } .products-cat-tree .items > .item > .inr > .title { position: static; font-size: 16px; line-height: 32px; font-weight: 700; text-transform: uppercase; padding: 16px 20px 14px; cursor: pointer; } .products-cat-tree .items > .item > .inr > .title .description { padding: 0; } /* Ausgefaltete Speisekarte */ .products-cat-tree > .items > .item > .childs, .products-cat-tree > .items > .item > .childs > .product-items { padding: 0; } .product-item { padding: 0; margin-bottom: 20px; } .product-item > .inr { padding: 9px 63px 9px 9px; background-color: #fff; border-radius: 20px; display: flex; flex-flow: column nowrap; justify-content: center; } .product-item.has-img > .inr { min-height: 120px; padding-left: 136px; } .product-item > .inr > .title { line-height: 22px; } .product-item > .inr > .title > .info-exp { position: absolute; top: 9px; left: 9px; height: 16px; width: 16px; border: none; color: rgba(0, 0, 0, 0); margin: 0; padding: 0; background-image: var(--svg-info); } .product-item.has-img > .inr > .img { top: 10px; left: 10px; height: calc(100% - 20px); max-width: 117px; } .product-item.has-img > .inr > .img img { object-fit: contain; width: auto; } .product-item.has-img > .inr > .description { display: none; } .product-item.has-img > .inr > .price { font-weight: 700; line-height: 24px; } .product-item > .inr > .cart-add { box-shadow: var(--standard-shadows); background-size: 32px; background-position: center; background-repeat: no-repeat; background-image: var(--svg-plus); } .product-item > .inr > .cart-add::before { display: none; } /* Einkaufswagen-Footer */ .shopping-cart-preview > .inr { gap: 9px; box-shadow: 0px 0px 32px -16px rgba(0, 17, 32, 0.33), 0px 0px 16px -16px rgba(0, 17, 32, 0.24); } .shopping-cart-preview-info { color: unset; font-size: 16px; line-height: 22px; font-weight: 500; padding: 10px 20px 10px 41px; } .shopping-cart-preview-button { font-size: 15px; line-height: 22px; font-weight: 300; } /* Impressum */ .item-single-premium .imprint { font-size: 14px; line-height: 18px; padding: 20px; border-radius: 20px; margin: 10px; margin-top: 70px; } .item-single-premium .imprint > .title { font-size: 16px; line-height: 24px; font-weight: 700; } .item-single-premium .imprint a { text-wrap: nowrap; } /* "Produkt Hinzufügen" Modal */ .cart-add-form { padding: 56px 0 0 0; min-height: 100vh; } .cart-add-form > .inr { border-radius: 24px 24px 0 0; /* Damit der Footer die ganze Seite einnimmt: */ min-height: 100%; padding-bottom: 80px; } .cart-add-form > .inr > .title { background: #fff; color: unset; font-weight: 700; font-size: 16px; line-height: 24px; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding: 33px 10px 14px 10px; } .cart-add-form > .inr > .title .close { top: 20px; right: 20px; height: 32px; width: 32px; background-image: var(--svg-close); } /* Verhindere Konflikt mit dem (X) bei kleinen Bildschirmbreiten */ @media only screen and (max-width: 310px) { .cart-add-form > .inr > .title .close { height: 24px; width: 24px; background-size: 24px; } } .cart-add-form > .inr > .title .close::before { content: ""; } .cart-add-form > .inr > .product { border-top: 1px var(--border-grey) solid; border-bottom: 1px var(--border-grey) solid; background-color: #eff6e5; } .cart-add-form > .inr > .product .product-info { padding: 10px; align-items: center; } .cart-add-form > .inr > .product .product-info .title, .cart-add-form > .inr > .product .product-info .price { font-weight: 700; font-size: 16px; line-height: 24px; padding: 0; } .cart-add-form > .inr > .product .product-info .price { letter-spacing: 0.04em; } .cart-add-form > .inr > .content { background: #fff; } .cart-add-form > .inr .customize-type-20 > .title { font-weight: 700; font-size: 16px; line-height: 24px; margin-bottom: 20px; } .cart-add-form > .inr .customize-type-20 > .items.media-show { padding: 0px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 110px)); gap: 20px 10px; justify-content: space-evenly; } .cart-add-form > .inr .customize-type-20 > .items.media-show > .item > .inr { padding: 0; } .cart-add-form > .inr .customize-type-20 > .items.media-show > .item > .inr > .img { width: 75px; height: 75px; cursor: pointer; } .cart-add-form > .inr .customize-type-20 > .items.media-show > .item > .inr > .text { font-size: 16px; line-height: 22px; } /* ▼ ersetzt den bisherigen "ohne"-Hack */ /* ▲ Ende */ .cart-add-form > .inr .customize-type-20 > .items.media-show > .item.active > .inr > .img::before { content: ""; height: 32px; width: 32px; border: none; background-image: var(--svg-remove); } /* ### Extrawurst für den Pfand ### Das onlinebestellen-Markup bietet keinen Weg zur Unterscheidung, also greifen wir kurzfristig beim Preis (0,08 € bzw. 0,25 €). Sollte sich der Preis je ändern, oder eine andere Extrazutat o.Ä. auch genau diese Werte kosten, müssen wir das überdenken. */ /* Pfand 0,08 € und 0,25 € (inkl. Komma-Schreibweise) */ .cart-add-form > .inr .customize-type-20 > .items.media-show > .item.active:is([data-price="0.08"], [data-price="0,08"], [data-price="0.25"], [data-price="0,25"]) > .inr > .img::before { background-image: var(--svg-check); } .cart-add-form > .inr .customize-type-20 > .items.media-show > .item.active:is([data-price="0.08"], [data-price="0,08"], [data-price="0.25"], [data-price="0,25"]) > .inr > .img { background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: var(--svg-pfand); } .cart-add-form > .inr > .footer { position: fixed; bottom: 0px; max-width: 100%; width: 600px; z-index: 9999; flex-flow: row wrap; justify-content: space-evenly; background: #fff; border-top: 1px var(--border-grey) solid; } .cart-add-form > .inr > .footer .qty-set { flex: 140px 0 0; } .cart-add-form > .inr > .footer .qty-set > .inr { height: 40px; border: 0; } .cart-add-form > .inr > .footer .qty-set > .inr > * { flex-basis: 40px; } .cart-add-form > .inr > .footer .qty-set .down { border-radius: var(--border-radius) 0 0 var(--border-radius); background-image: var(--svg-minus); } .cart-add-form > .inr > .footer .qty-set .val { border-top: 2px solid var(--main-color); border-bottom: 2px solid var(--main-color); } .cart-add-form > .inr > .footer .qty-set .up { border-radius: 0 var(--border-radius) var(--border-radius) 0; background-image: var(--svg-plus); } .cart-add-form > .inr > .footer .qty-set .product-qty-click { color: transparent; background-size: 32px; background-repeat: no-repeat; background-position: center; } .cart-add-form > .inr > .footer label.button .inr { padding: 12px; height: 40px; text-transform: uppercase; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; box-shadow: var(--standard-shadows); } /* Checkout */ .booking { padding-bottom: 50px; } .booking .booking-account, .booking .checkbox-account-new { display: none; } .booking .booking-title { text-transform: uppercase; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; font-weight: bold; } .booking .label .title, label .title { font-size: 16px; line-height: 22px; } .booking label.button .inr { height: 42px; padding: 0px 12px; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; font-weight: bold; text-transform: uppercase; } .booking label.text .input-con input { border-radius: 6px; border: 2px solid var(--border-grey); } .booking label.checkbox-text .check { border-radius: 6px; } .booking .booking-con > .inr { border-radius: 20px; padding: 10px 10px 20px 10px; } .booking .booking-payment > .inr { padding: 20px 20px 30px 20px; } .booking .booking-payment .booking-title { padding: 0; } .booking .booking-payment .booking-payment-items .item { padding: 0; margin-top: 14px; } .booking-payment-items .item > .inr { padding: 0; background: transparent; gap: 10px; } .booking-payment-items .item > .inr .check { order: -2; height: 32px; width: 32px; border: none; background-image: var(--svg-uncheck); } .booking-payment-items .item.active > .inr .check { background-image: var(--svg-check); } .booking .booking-payment-items .item > .inr .check::before { display: none; } .booking-payment-items .item > .inr .title { padding: 0; font-size: 16px; line-height: 22px; font-weight: normal; } .booking .booking-payment .booking-payment-items .item .img { order: -1; padding: 0; } .booking .booking-payment .booking-payment-items .item .img img { height: 32px; } .booking label.textarea .input-con textarea { border-radius: 6px; } /* Checkbox Konto Anlegen */ label.checkbox-text.active .check::before { display: none; } label.checkbox-text.active .check { background-position: center; background-size: 28px; background-repeat: no-repeat; background-image: var(--svg-check); } /* Trinkgeld */ .booking .booking-gratuity-items label.button .inr { font-weight: 300; } .booking label.text .input-con .unit-inr { height: 44px; width: 44px; border-radius: 0px 6px 6px 0px; padding: 0; display: flex; justify-content: space-around; align-items: center; font-size: 16px; font-weight: bold; } /* Einkaufswagen */ .booking .cart-items > .item { border-bottom: 1px solid var(--border-grey); padding-bottom: 20px; margin-bottom: 10px; } .booking .cart-items > .item > .top > .title { font-size: 16px; font-weight: 800; line-height: 24px; } .booking .cart-items > .item .extras { font-size: 14px; line-height: 18px; color: var(--text-color); font-weight: 400; } .booking .cart-items > .item > .top .price { font-weight: bold; } .booking .cart-items > .item .qty-change .count { height: 28px; width: 28px; } .booking .cart-items > .item .qty-change .count::before { content: ""; height: 28px; width: 28px; padding: 0; background-color: var(--sub-color); mask-size: 32px; mask-position: center; mask-repeat: no-repeat; } .booking .cart-items > .item .qty-change .count.count-up::before { mask-image: var(--svg-plus); } .booking .cart-items > .item .qty-change .count.count-down::before { mask-image: var(--svg-minus); } .booking .cart-items > .item .qty-change .count-sep { width: 2px; border-top: 1px var(--sub-color) solid; border-bottom: 1px var(--sub-color) solid; } /* Seitenende */ .booking .ety-terms-txt { padding: 20px 10px; font-size: 16px; } .booking .booking-submit .inr { box-shadow: var(--standard-shadows); } .booking .booking-submit .inr::before { content: ""; height: 42px; width: 42px; padding: 0; background-size: 42px; background-repeat: no-repeat; background-position: center; border: none; background-image: var(--svg-check); } /* #### === Saucenauswahl (tag_342921) — stabiles Label ohne "ohne " bei NICHT aktiven === */ /* 1) Konsistentes Spalten-Layout + fixer vertikaler Abstand */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; /* ← hier Abstand Bild ↔ Text feinjustieren (2–6px) */ padding: 0 !important; } /* 2) Bild sauber ohne Baseline-Lücke rendern */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr > .img { margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr > .img img { display: block !important; } /* 3) Nur bei NICHT aktiven Items: Original-Text komplett ausblenden */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item:not(.active) > .inr > .text { display: none !important; } /* 4) Ersatz-Label als eigenes Flex-Item unter dem Bild einfügen */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item:not(.active) > .inr::after { content: ""; /* wird je Position überschrieben */ display: block; font-size: 16px; line-height: 22px; color: var(--text-color); text-align: center; white-space: normal; hyphens: auto; } /* 5) Konkrete Texte je Position (Reihenfolge fix) */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(1) > .inr::after { content: "Erdbeer-Knoblauch"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(2) > .inr::after { content: "Erdbeer-scharf"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(3) > .inr::after { content: "Erdbeer-Kräuter"; } /* 6) (Sicherheit) Falls frühere Hacks aktiv waren: aktives Label normal anzeigen */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item.active > .inr > .text { display: block !important; font-size: 16px !important; line-height: 22px !important; color: var(--text-color) !important; transform: none !important; } /* === Beilagen Erdbeerdöner (tag_345121) — Label ohne "ohne " bei NICHT aktiven === */ /* 1) Konsistentes Spalten-Layout + fixer vertikaler Abstand */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; /* ggf. 2–6px feintunen */ padding: 0 !important; } /* 2) Bild sauber ohne Baseline-Lücke rendern */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr > .img { margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item > .inr > .img img { display: block !important; } /* 3) Nur bei NICHT aktiven Items: Original-Text komplett ausblenden */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item:not(.active) > .inr > .text { display: none !important; } /* 4) Ersatz-Label als eigenes Flex-Item unter dem Bild einfügen */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item:not(.active) > .inr::after { content: ""; /* wird je Position überschrieben */ display: block; font-size: 16px; line-height: 22px; color: var(--text-color); text-align: center; white-space: normal; hyphens: auto; } /* 5) Konkrete Texte je Position (Reihenfolge fix) */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_97740"]) > .items.media-show > .item:not(.active):nth-child(1) > .inr::after { content: "Zwiebeln"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(2) > .inr::after { content: "Rotkohl"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(3) > .inr::after { content: "Weißkohl"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(4) > .inr::after { content: "Salat"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(5) > .inr::after { content: "Gurke"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(6) > .inr::after { content: "Tomaten"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(7) > .inr::after { content: "türkischen Käse"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(8) > .inr::after { content: "Erdbeerpulver mit Sumak"; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item:not(.active):nth-child(9) > .inr::after { content: "Limonensaft"; } /* 6) (Sicherheit) Aktive Labels wieder normal anzeigen */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_345121"]) > .items.media-show > .item.active > .inr > .text { display: block !important; font-size: 16px !important; line-height: 22px !important; color: var(--text-color) !important; transform: none !important; } /* Titel im "Produkt hinzufügen"-Modal auf "Produkt entfernen" umschreiben */ .cart-add-form > .inr > .title { position: relative; color: transparent; /* Originaltext unsichtbar machen */ font-size: 0 !important; } /* Ersatztext darüberlegen */ .cart-add-form > .inr > .title::after { content: "PRODUKT ENTFERNEN"; position: absolute; left: 0; right: 0; top: 0; text-align: center; /* gleiche Typo wie zuvor */ font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-color); pointer-events: none; /* Clicks auf das (X) nicht blockieren */ } /* Sicherheit: (X) bleibt sichtbar */ .cart-add-form > .inr > .title .close { color: transparent; } /* nur falls Themes Text nutzen */ /* === Modal-Titel: größer & exakt mittig === */ :root{ --modal-title-size: 22px; /* 20–26px je nach Wunsch */ --modal-title-height: 68px; /* Mindesthöhe der Titelzeile */ } .cart-add-form > .inr > .title { position: relative; color: transparent; /* Originaltext ausblenden */ min-height: var(--modal-title-height); padding: 0; /* wir zentrieren über ::after */ } .cart-add-form > .inr > .title::after { content: "PRODUKT ENTFERNEN"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* echte Mitte */ width: calc(100% - 80px); /* Platz fürs (X) rechts */ text-align: center; font-weight: 800; font-size: var(--modal-title-size); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-color); pointer-events: none; /* Klicks auf (X) bleiben möglich */ } /* (optional) Close-Button etwas harmonischer platzieren */ .cart-add-form > .inr > .title .close { top: 16px; right: 16px; } /* === "Saucenauswahl" → "Saucen" (nur in der Saucen-Gruppe tag_342921) === */ .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_342921"]) > .title { position: relative; color: transparent; /* Originaltext ausblenden */ font-size: 0 !important; } .cart-add-form > .inr .customize-type-20:has(> .items.media-show > .item > .inr > input[name*="tag_342921"]) > .title::after { content: "Saucen"; position: absolute; left: 0; right: 0; top: 0; text-align: left; /* wie eure übrigen Gruppenüberschriften */ font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; text-transform: none; /* oder uppercase, falls gewünscht */ color: var(--text-color); } /* ====== Invertierte Logik: Default = ausgewählt (Haken) ====== */ /* 1) Bestehende aktiven-Haken sicher ausschalten */ .cart-add-form .customize-type-20 .items.media-show > .item.active > .inr > .img::after { content: none !important; background-image: none !important; } /* 2) Default (NICHT aktiv): grüne Auswahl-Optik */ .cart-add-form .customize-type-20 .items.media-show > .item:not(.active) > .inr > .img { position: relative; border: 2px solid var(--main-color); box-shadow: 0 0 0 2px rgba(118,184,42,.18), 0 8px 20px -8px rgba(118,184,42,.22); border-radius: 14px; background: #fff; } .cart-add-form .customize-type-20 .items.media-show > .item:not(.active) > .inr > .img::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; background-image: var(--svg-check); /* grüner Kreis mit Haken */ background-repeat: no-repeat; background-size: 28px 28px; pointer-events: none; } /* 3) Aktiv (zum Entfernen): rote „ohne“-Optik */ .cart-add-form .customize-type-20 .items.media-show > .item.active > .inr > .img { border: 2px solid #ff6c67; box-shadow: 0 0 0 2px rgba(255,108,103,.18), 0 8px 20px -8px rgba(255,108,103,.22); border-radius: 14px; } .cart-add-form .customize-type-20 .items.media-show > .item.active > .inr > .img::before { /* roter Minus-Chip unten rechts */ content: ""; position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; background-image: var(--svg-remove); /* roter Kreis mit Minus */ background-repeat: no-repeat; background-size: 28px 28px; pointer-events: none; } /* 4) Kleine Robustheit für das Bild selbst */ .cart-add-form .customize-type-20 .items.media-show > .item > .inr > .img { line-height: 0; } .cart-add-form .customize-type-20 .items.media-show > .item > .inr > .img img { display: block; }