:root{ --green:#168a36;--green2:#22a447;--light:#edf8ef;--text:#1f2521; --muted:#6e756f;--line:#e3e7e4;--bg:#f4f6f4;--danger:#c62b2b;--card:#fff; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)} button,input,select{font:inherit} button,input,select,textarea{touch-action:manipulation} body{min-height:100vh} .app{max-width:540px;margin:0 auto;background:#fff;min-height:100vh;padding-bottom:84px} header{position:sticky;top:0;z-index:8;background:#fff;border-bottom:1px solid var(--line);padding:14px 16px 12px} .brand{font-size:24px;font-weight:800;color:#08772b;line-height:1.02} .brand small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:7px;line-height:1.35} main{padding:14px} .view{display:none}.view.active{display:block} h1{font-size:25px;margin:0} p{margin:4px 0 0;color:var(--muted);font-size:13px} .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .add{border:0;background:var(--light);color:var(--green);border-radius:14px;width:48px;height:48px;font-size:30px;font-weight:800} .segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#eef0ee;padding:4px;border-radius:13px;margin-bottom:12px} .segment button{border:0;background:transparent;border-radius:10px;padding:11px 8px;font-weight:700;color:#707770} .segment button.active{background:var(--green);color:#fff} .list{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff} .item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-bottom:1px solid var(--line);min-height:60px} .item:last-child{border-bottom:0} .check{width:29px;height:29px;accent-color:var(--green);flex:0 0 auto} .main{flex:1;min-width:0} .title{font-size:18px;font-weight:800} .sub{font-size:12px;color:var(--muted);margin-top:3px} .chev{font-size:24px;color:#aaa} .movebox{display:flex;flex-direction:column;gap:3px} .movebtn{border:0;background:#f2f4f2;color:#555;border-radius:8px;width:31px;height:25px;font-size:15px;font-weight:800;line-height:1} .wide{width:100%;border-radius:13px;padding:14px 12px;font-weight:800;margin-top:11px} .primary{background:var(--green);color:#fff;border:1px solid var(--green)} .secondary{background:#fff;color:var(--green);border:1px solid var(--green)} .primary small{display:block;font-size:11px;font-weight:500;margin-top:2px} .card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:13px;margin-bottom:11px} .card h3{margin:0 0 8px;font-size:18px} table{width:100%;border-collapse:collapse;font-size:13px} th,td{padding:8px 3px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} th:last-child,td:last-child{text-align:right} .good{color:var(--green);font-weight:800} .muted{color:var(--muted)} .empty{border:1px dashed #bdc6be;border-radius:14px;padding:24px 18px;text-align:center;color:var(--muted)} .winner{background:var(--light);color:#106b29;border-radius:11px;padding:10px;font-weight:800;margin-top:9px} nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:10;width:min(540px,100%);height:72px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr);padding-bottom:max(env(safe-area-inset-bottom),0px)} nav button{border:0;background:#fff;color:#777;font-size:11px;font-weight:700} nav button span{display:block;font-size:22px;margin-bottom:2px} nav button.active{color:var(--green)} .modal{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30;display:flex;align-items:flex-end;justify-content:center} .modal.hidden{display:none} .sheet{width:min(540px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom))} .sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .sheethead h2{margin:0;font-size:21px} .close{border:0;background:#f0f2f0;border-radius:12px;width:40px;height:40px;font-size:18px} .field{margin-bottom:12px} label{display:block;font-size:12px;font-weight:800;margin-bottom:5px} input,select{width:100%;border:1px solid #cfd5d0;border-radius:11px;padding:12px;background:#fff;font-size:16px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px} .pricebox{border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:10px} .pricebox h3{margin:0 0 10px;font-size:16px} .delete{width:100%;border:0;background:#fff;color:var(--danger);font-weight:800;padding:13px;margin-top:5px} .tag{display:inline-block;background:var(--light);color:var(--green);font-size:11px;font-weight:800;border-radius:999px;padding:5px 7px} .note{font-size:12px;color:var(--muted)} textarea{width:100%;min-height:86px;border:1px solid #cfd5d0;border-radius:11px;padding:12px;background:#fff;font:inherit;font-size:16px;resize:vertical} .receipt-preview{width:100%;max-height:360px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fafafa;margin-top:10px} .receipt-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:14px 0;border-bottom:3px solid #8f9891} .receipt-row:last-child{border-bottom:0} .receipt-match{font-size:12px;color:var(--muted);margin-top:2px} .receipt-price{font-weight:800;text-align:right} .receipt-status{font-size:11px;font-weight:800;color:var(--green)} .progress{width:100%;height:10px;background:#e9ece9;border-radius:999px;overflow:hidden;margin:10px 0} .progress>div{height:100%;background:var(--green);width:0%} .smallbtn{border:1px solid var(--green);background:white;color:var(--green);border-radius:10px;padding:8px 10px;font-weight:800} .navtiny{font-size:10px} .warnbox{border:2px solid #e58a00!important;background:#fff7e8!important} .warntext{color:#b25a00;font-size:12px;font-weight:800;line-height:1.35} .warncell{background:#fff3dc;color:#a64f00;font-weight:800} .warnbadge{display:inline-block;background:#fff0cf;color:#a64f00;border:1px solid #e7a93b;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:800} .sync-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px} .sync-status{margin-top:10px;padding:10px 11px;border-radius:11px;background:#f1f3f1;color:var(--muted);font-size:12px;line-height:1.4} .sync-status.ok{background:var(--light);color:#106b29;font-weight:700} .sync-status.error{background:#fff0f0;color:var(--danger);font-weight:700} .sync-key-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end} .sync-key-row .smallbtn{height:43px} .store-search-card{border:2px solid #c9e5f7;background:#f7fcff} .store-search-results{display:grid;gap:9px;margin-top:12px} .store-search-result{width:100%;display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:13px;background:#fff;padding:12px;cursor:pointer;color:inherit} .store-search-result strong{display:block;font-size:15px;overflow-wrap:anywhere} .store-search-result small{display:block;grid-column:1;color:var(--muted);font-size:11px;line-height:1.35;overflow-wrap:anywhere} .store-search-result .take{grid-column:2;grid-row:1 / span 2;color:var(--green);font-weight:900;font-size:13px;white-space:nowrap} .store-search-result:active{background:var(--light)} .store-search-status{margin-top:10px;padding:10px 11px;border-radius:11px;background:#f1f3f1;color:var(--muted);font-size:12px;line-height:1.4} .store-search-status.error{background:#fff0f0;color:var(--danger);font-weight:700} .store-address-box{border:1px solid #dce3df;border-radius:11px;background:#f7f8f7;padding:10px 12px;font-size:13px;line-height:1.4;color:#46535a;overflow-wrap:anywhere} .bon-first-warning{border:3px solid #e58a00;background:#fff4d8;border-radius:18px;padding:18px 16px;margin:0 0 16px;box-shadow:0 4px 14px #8a5b0018} .bon-first-warning .bon-warning-title{font-size:21px;font-weight:900;color:#9a4b00;margin-bottom:8px;line-height:1.2} .bon-first-warning .bon-warning-text{font-size:16px;font-weight:700;line-height:1.45;color:#5c4300} .bon-first-warning .wide{margin-top:12px} .drag-grip{touch-action:none!important;user-select:none;-webkit-user-select:none;cursor:grab!important} .drag-grip:active{cursor:grabbing!important} .dragging{position:relative;z-index:20;background:#e4f2fc!important;outline:3px solid #247fc0!important;box-shadow:0 8px 22px #17365333} body.drag-active{user-select:none;-webkit-user-select:none} /* v41: Handyansicht Preisvergleich – keine breite Tabelle mehr, sondern übersichtliche Karten */ .compare-desktop{display:none} .compare-mobile{display:block} .compare-mobile-card{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;margin-bottom:12px;box-shadow:0 2px 8px #24445a0a} .compare-mobile-card.cm-drive{background:#f4f9fc} .compare-mobile-card.cm-basket{background:#fff8e8;border-top:4px solid #8aa0af} .compare-mobile-card.cm-total{background:#f2f8f0;border-top:4px solid #5e788b} .compare-mobile-title{padding:13px 14px 10px;font-size:18px;font-weight:900;line-height:1.2} .compare-mobile-subtitle{display:block;font-size:12px;font-weight:600;color:#657581;margin-top:4px;line-height:1.35} .compare-mobile-edit{display:inline-block;border:0;background:transparent;padding:5px 0 0;color:#3379a7;font-size:12px;font-weight:800;cursor:pointer;text-align:left} .compare-mobile-store{padding:11px 14px;border-top:1px solid var(--line);background:#fff} .compare-mobile-store.winner{background:#e4f4de;box-shadow:inset 4px 0 0 #59a947} .compare-mobile-store.missing{background:#fafcfd;color:#7b8790} .compare-mobile-storehead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline} .compare-mobile-storename{font-size:15px;font-weight:900;min-width:0;overflow-wrap:anywhere} .compare-mobile-price{font-size:20px;font-weight:900;text-align:right;white-space:nowrap;color:#163b57} .compare-mobile-store.winner .compare-mobile-price{color:#267126} .compare-mobile-detail{font-size:12px;color:#657581;margin-top:4px;line-height:1.35} .compare-mobile-store.winner .compare-mobile-detail{color:#2f712a} .compare-mobile-fair{font-size:13px;font-weight:900;color:#36566d;margin-top:5px} .compare-mobile-store.winner .compare-mobile-fair{color:#2f712a} .compare-mobile-badge{display:inline-block;margin-top:6px;color:#2f7d32;font-size:12px;font-weight:900} .compare-mobile-result{padding:9px 14px;border-top:1px solid var(--line);background:#f8fbfd;font-size:12px;color:#657581} .compare-mobile-result b{color:#2f7d32} .compare-mobile-note{font-size:12px;line-height:1.45;color:#657581;margin:10px 3px 0} @media(max-width:760px){ #vergleich.view.active{overflow-x:hidden} #vergleich .head{margin-bottom:8px} #vergleich .head h1{font-size:24px} #vergleich .head p{font-size:12px;line-height:1.35} #vergleich main{overflow-x:hidden} #compare>h2{font-size:22px!important;margin-top:0!important} } :root{--green:#459c3b;--light:#edf6e7;--text:#15334d;--muted:#627588;--line:#dce6eb;--bg:#edf3f5} body{color:var(--text)}header{background:#f9fdff;position:static}.home-brand{border:0;background:transparent;text-align:left;cursor:pointer;font-size:34px;letter-spacing:-1px;padding:0}.brand small{letter-spacing:0;font-size:14px;color:#284862} .app{max-width:640px}main{padding:16px}nav{width:min(640px,100%);grid-template-columns:repeat(7,1fr)}nav button{font-size:10px}nav button span.navtiny{font-size:10px}.landscape{border-radius:18px;overflow:hidden;background:#edf6e7;position:relative;margin-bottom:20px}.landscape svg{width:100%;display:block}.landscape span{position:absolute;bottom:10px;left:16px;font-size:12px;color:#234f35;background:#ffffffe8;padding:5px 8px;border-radius:8px}.greeting{font-size:28px}.intro{font-size:15px;line-height:1.5;margin-bottom:18px}.mode-switch{margin-top:18px}.mode-switch .active{background:#247fc0!important}.hero-button{border:0;border-radius:17px;color:#fff;background:#459c3b;width:100%;padding:19px;font-size:21px;font-weight:700;text-align:left;cursor:pointer;margin:12px 0}.hero-button.blue{background:#257fbf}.hero-button span{float:right}.hero-button small{display:block;font-size:14px;font-weight:400;margin-top:6px}.category-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.category-tiles button{border:1px solid #dce6eb;border-radius:17px;background:linear-gradient(145deg,#fff,#f2f7fa);padding:15px 5px;min-height:100px;font-weight:700;font-size:13px;color:#193954;cursor:pointer}.category-tiles span{display:block;font-size:32px;margin-bottom:9px}.search-label{margin-top:10px}.search-result{display:block;width:100%;padding:12px;text-align:left;background:#edf6e7;border:0;margin-top:4px}.compact{padding:4px 6px;gap:5px;min-height:53px}.article-name{flex:1;min-width:0;text-align:left;border:0;background:transparent;color:inherit;padding:7px;cursor:pointer}.article-name strong{display:block;font-size:15px;overflow-wrap:anywhere}.article-name small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.compact .check{width:23px;height:23px}.drag-grip,.edit-pencil{border:0;background:transparent;color:#647e8b;width:38px;min-height:44px;font-size:25px;cursor:pointer;flex-shrink:0}.drag-grip{touch-action:none;cursor:grab}.dragging{background:#e4f2fc;outline:2px solid #247fc0}.edit-pencil{font-size:21px}#categoryFilter{margin-bottom:10px}#categoryFilter select{padding:9px}summary{cursor:pointer;font-size:14px;padding:8px 0}.inline-check{display:flex;align-items:center;gap:9px;font-size:15px;margin:12px 0}.inline-check input{width:24px;height:24px}.cost-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0}.cost-row.total{border-top:1px solid var(--line);font-size:21px;color:#367b2c}.option-card{margin-top:14px}.option-card h3{margin-top:10px;line-height:1.4}.best-option{border:2px solid #459c3b;background:#f5fbf1}.option-card ul{padding-left:20px;font-size:13px;line-height:1.6}.field input{max-width:100%}.sheet{width:min(640px,100%)}button:focus-visible{outline:3px solid #267bc1;outline-offset:2px} body{background:#eef4f7}.app{background:linear-gradient(#f0faff,#fff 600px,#f2f7fa)}header{border-bottom:0;background:transparent;padding:24px 22px 6px}.home-brand{font-size:46px;letter-spacing:-2px}.brand small{font-size:15px;font-weight:700;letter-spacing:0}.welcome-landscape{height:170px;position:relative;margin:-6px -16px 0;overflow:hidden;background:#eaf7ff}.village-photo{position:absolute;inset:40px 0 0;background-image:var(--reference-art);background-size:168% auto;background-position:74% 16.2%;opacity:.98}.welcome-landscape:after{content:'';position:absolute;left:-5%;right:-5%;height:40px;background:#fff;bottom:-20px;border-radius:50% 50% 0 0}.regional-line{position:absolute;top:5px;right:18px;font-family:Georgia,serif;font-size:15px;line-height:1.4;text-align:right;color:#24547b}.regional-line span{color:#4aab3c;font-size:25px}.regional-badge{position:absolute;right:15px;bottom:20px;background:#e2f3d9e8;color:#2f6a2b;transform:rotate(-7deg);padding:9px 14px;font-size:16px;line-height:1.2}.welcome-copy{padding:13px 6px 0;background:#fff}.greeting{font-size:27px}.intro{font-size:17px;margin-top:5px;margin-bottom:15px}.mode-switch{border:1px solid #d4e0e8;border-radius:22px;background:#f1f5f8;margin:14px 0 9px}.mode-switch button{border-radius:18px;padding:15px 5px;font-size:14px}.mode-status{background:#e5f3dd;color:#286f2b;padding:14px 10px;border-radius:19px;font-size:14px;margin-bottom:15px;text-align:center}.search-label{font-size:13px;margin-left:5px}#homeSearch{border:2px solid #d6e0e7;border-radius:18px;background:#fbfdff;padding:16px;font-size:21px}.hero-button{border-radius:20px;background:linear-gradient(115deg,#52a53c,#3d9434);padding:21px 17px;font-size:24px}.hero-button.blue{background:linear-gradient(115deg,#308dcc,#1877b9)}.favorite-hero{display:flex;align-items:center;flex-wrap:wrap;column-gap:13px;text-align:center;justify-content:center}.favorite-hero .heart-symbol{font-size:30px;float:none}.favorite-hero .hero-chevron{margin-left:auto;font-size:31px}.favorite-hero small{width:100%;font-size:12px;padding-left:36px;margin-top:2px;text-align:left;opacity:.94}.category-tiles{gap:10px}.category-tiles button{background:linear-gradient(130deg,#fff,#f5f9fc);box-shadow:0 3px 12px #31557508;border:1px solid #e0e9f0;min-height:147px;border-radius:21px;padding:9px 4px 13px;font-size:15px;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.category-tiles .product-photo{display:block;flex-shrink:0;width:92px;height:70px;margin:0 auto 9px;background-image:var(--reference-art);background-size:541px 961px;background-repeat:no-repeat}.photo-milk{background-position:-83px -524px}.photo-produce{background-position:-229px -524px}.photo-drinks{background-position:-381px -524px}.photo-bread{background-position:-82px -655px}.photo-household{background-position:-228px -655px}.category-tiles .photo-meat{background-image:none;font-size:65px;line-height:86px}.all-products-link{background:transparent;border:0;color:#226ea4;padding:9px;width:100%;text-align:center;font-weight:700}.favorites-link{background:#eef7fc;border:1px solid #c7e2f3;color:#207bbb;padding:10px;border-radius:12px;margin-bottom:12px}.favorite-toggle{border:0;background:transparent;color:#7b95a4;font-size:27px;min-width:36px;min-height:44px;cursor:pointer;padding:3px;flex-shrink:0}.favorite-toggle.is-favorite{color:#2284c5}.favorite-add{background:#2381be;border:0;border-radius:12px;padding:11px 9px;color:white;font-size:12px;font-weight:700;cursor:pointer;max-width:115px;min-height:44px}.favorite-add.already-selected{background:#e9f4e2;color:#387332;cursor:default}.favorite-row{gap:3px;padding:10px 5px}.compact[hidden]{display:none}.compact .article-name{padding:6px 2px}.compact .drag-grip{width:29px}.compact .edit-pencil{width:30px}.compact .check{width:21px;height:21px}.favorite-row .article-name strong{font-size:15px}@media(min-width:500px){.category-tiles .product-photo{transform:scale(1.25);margin-top:14px;margin-bottom:24px}.category-tiles button{min-height:178px}.welcome-landscape{height:205px}.greeting{font-size:32px}} :root{--text:#133450;--bg:#eff4f7}body{background:#eaf0f3;font-family:"Trebuchet MS",Arial,sans-serif}.app{width:100%;max-width:580px;container-type:inline-size;background:linear-gradient(110deg,#fff,#f4f8fb);padding-bottom:85px}.on-home .app{padding-bottom:10px}.on-home header,.on-home nav{display:none}.on-home main{padding:0}.reference-top{padding:13px 13px 0;background:#edf9ff}.reference-header{display:block;width:100%;height:auto}.start-controls{padding:0 15px}.ui-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px}.ui-icon svg{display:block;width:100%;height:100%}.mode-switch{display:flex;gap:3px;padding:3px;border:2px solid #d9e2e9;border-radius:25px;margin:7px 0 8px;background:linear-gradient(#fcfdff,#eff3f6)}.mode-switch button{display:flex;align-items:center;justify-content:center;gap:13px;flex:1;border-radius:21px;color:#65788a;font-size:clamp(17px,4.1cqw,24px);padding:12px 5px;line-height:1.2}.mode-switch button.active{background:linear-gradient(110deg,#2a8acf,#1279c2)!important;color:white}.mode-switch .ui-icon{width:32px;height:32px}.mode-status{display:flex;align-items:center;justify-content:center;gap:11px;padding:13px 18px;border-radius:22px;background:#e6f4de;color:#176625;margin:0 0 11px;font-size:clamp(16px,3.8cqw,23px)}.mode-status>svg{width:29px;height:29px;flex-shrink:0}.mode-status>svg:last-child{margin-left:auto}.mode-status strong{flex:1;text-align:center}.home-search-wrap{display:flex;align-items:center;gap:15px;padding:15px 20px;border:2px solid #d9e0e7;border-radius:24px;background:#f9fbfe;margin:0 0 9px;color:#64798a}.home-search-wrap .ui-icon{width:33px;height:33px}#homeSearch{border:0;padding:2px 0;font-size:clamp(23px,5.7cqw,34px);background:transparent;min-width:0;color:#173653;border-radius:0}#homeSearch:focus{outline:0}#homeSearch::placeholder{color:#718092}.home-search-wrap:focus-within{outline:3px solid #94c7e9} #homeResults{margin:0 0 11px} #homeResults .search-result{display:flex;align-items:center;gap:14px;width:100%;min-height:70px;padding:14px 18px;margin:7px 0 0;border:2px solid #91c87f;border-radius:18px;background:#eef8e9;color:#183d21;font-family:inherit;font-size:clamp(20px,5cqw,28px);font-weight:800;text-align:left;box-shadow:0 2px 8px #244b2b10;cursor:pointer} #homeResults .search-result:before{content:'+';display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#459c3b;color:#fff;font-size:30px;font-weight:400;line-height:1} #homeResults .search-result.selected-result{border-color:#459c3b;background:#e4f4df;color:#266d28} #homeResults .search-result.selected-result:before{content:'✓';font-size:23px;font-weight:800} .all-articles-hero{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:70px;margin:0 0 11px;padding:15px 20px;border:2px solid #459c3b;border-radius:23px;background:#fff;color:#2f7c2d;font-family:inherit;font-size:clamp(21px,5.2cqw,30px);font-weight:800;cursor:pointer;box-shadow:0 2px 10px #3155750b} .all-articles-hero .all-icon{font-size:30px;line-height:1} .all-articles-hero .all-arrow{margin-left:auto;font-size:32px;line-height:1} .hero-button{margin:0;border:0;border-radius:23px;background:linear-gradient(110deg,#4fa23c,#3b9134);color:white;font-family:inherit;box-shadow:inset 0 1px 1px #ffffff22}.favorite-hero{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:16px;padding:19px 23px;background:linear-gradient(110deg,#328fce,#137ac1)!important;font-size:clamp(22px,5.6cqw,33px);font-weight:800;line-height:1.15;text-align:center}.favorite-hero>span:nth-child(2){flex:1;float:none}.favorite-hero .ui-icon{width:35px;height:35px;float:none}.favorite-hero .arrow{width:23px;height:26px;margin-left:0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.category-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:11px 0}.category-tiles button{display:block;min-height:0;height:auto;padding:0;border:1px solid #e3ebf0;border-radius:22px;overflow:hidden;background:#f9fcff;box-shadow:0 3px 13px #2b547009;cursor:pointer}.category-tiles button svg{width:100%;height:auto;display:block}.basket-hero{display:flex;align-items:center;gap:18px;justify-content:center;padding:19px 23px;margin:0 0 11px;font-size:clamp(29px,7cqw,41px);font-weight:800;text-align:center;line-height:1.05}.basket-hero .ui-icon{width:53px;height:53px;float:none}.basket-hero>span:nth-child(2){flex:1;float:none}.basket-hero small{font-size:clamp(17px,4.4cqw,25px);font-weight:400;line-height:1.2;margin-top:5px}.basket-hero .arrow{width:24px;height:27px}.home-footer{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}.home-footer>button,.home-footer>div{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid #d5e3ee;border-radius:22px;background:linear-gradient(115deg,#e8f4fc,#f9fcfe);color:#305a77;min-height:75px;padding:10px 7px;font-family:inherit;text-align:left}.home-footer strong{display:block;font-size:clamp(13px,3.3cqw,19px);white-space:nowrap}.home-footer small{display:block;font-size:clamp(11px,2.5cqw,14px);margin-top:3px}.home-footer .ui-icon{width:35px;height:35px}.home-footer>div{font-size:clamp(12px,2.8cqw,16px);font-style:italic;color:#708697;line-height:1.35}.home-quicklinks{display:flex;justify-content:center;gap:0;padding:12px 0 3px}.home-quicklinks button{border:0;background:transparent;color:#396e94;font-size:12px;padding:5px 10px;cursor:pointer}.help-text p{font-size:16px;line-height:1.5;margin-bottom:14px}@media(max-width:400px){.start-controls{padding:0 10px}.reference-top{padding:10px 9px 0}.mode-switch{border-radius:21px}.mode-switch button{gap:8px;padding:10px 3px}.mode-switch .ui-icon{width:28px;height:28px}.mode-status{padding:10px 13px;gap:7px}.home-search-wrap{padding:12px 15px}.favorite-hero{padding:17px 20px;gap:10px}.category-tiles{gap:7px}.basket-hero{padding:16px 18px}.home-footer .ui-icon{width:28px;height:28px}.home-footer>button,.home-footer>div{gap:6px;border-radius:17px}.home-quicklinks button{padding:5px 7px;font-size:11px}} /* v0.4.7 Startseite: Lieferart klar grün, reale Kategorien, keine Angebotskachel */ .mode-switch{background:#e6f4de!important;border-color:#b8dcae!important;gap:4px!important} .mode-switch button{background:#e6f4de!important;color:#216b2a!important;font-weight:800!important} .mode-switch button.active{background:linear-gradient(110deg,#4fa23c,#3b9134)!important;color:#fff!important;box-shadow:inset 0 1px 1px #ffffff33} .mode-switch button:not(.active){background:#e6f4de!important;color:#216b2a!important} .category-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:12px 0!important} .category-tiles button{min-height:108px!important;padding:12px 8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:1.5px solid #d9e7dc!important;background:linear-gradient(145deg,#fff,#f1f8ee)!important;color:#194d24!important} .category-tiles .category-symbol{font-size:43px!important;line-height:1!important;margin:0!important;display:block!important} .category-tiles button strong{font-size:clamp(14px,3.5cqw,19px)!important;line-height:1.12!important;text-align:center!important;overflow-wrap:anywhere} @media(max-width:400px){.category-tiles button{min-height:96px!important;padding:9px 6px!important}.category-tiles .category-symbol{font-size:36px!important}} /* v0.4.8 Tablet-Optimierung: ab 700px echte Tabletansicht; Handy bleibt unverändert */ @media (min-width:700px){ body{background:#dfe8ed} .app{max-width:1000px;min-height:100vh;box-shadow:0 0 28px #24445a18;padding-bottom:96px} main{padding:24px 30px 108px} header{padding:20px 30px 12px} .home-brand{font-size:48px} .brand small{font-size:16px} h1{font-size:31px} p{font-size:15px;line-height:1.45} .head{margin-bottom:18px} .add{width:58px;height:58px;font-size:34px;border-radius:16px} .list{border-radius:18px} .item{min-height:76px;padding:16px 18px;gap:16px} .check{width:34px;height:34px} .title{font-size:21px} .sub{font-size:14px;line-height:1.35} .chev{font-size:28px} .movebtn{width:38px;height:30px;font-size:17px} .wide{padding:16px 15px;font-size:18px;border-radius:15px} .card{padding:18px;border-radius:18px;margin-bottom:15px} .card h3{font-size:21px;margin-bottom:11px} table{font-size:15px} th,td{padding:11px 7px} label{font-size:14px;margin-bottom:7px} input,select,textarea{font-size:18px;padding:14px;border-radius:13px} .note{font-size:14px;line-height:1.45} .grid2{gap:14px} .pricebox{padding:16px;border-radius:15px} .pricebox h3{font-size:19px} .smallbtn{padding:11px 14px;font-size:16px} .sync-actions{gap:14px} .sync-status{font-size:14px;padding:13px 15px} .store-search-result{padding:15px 16px;border-radius:15px} .store-search-result strong{font-size:18px} .store-search-result small{font-size:13px} .receipt-row{gap:14px;padding:17px 0} .receipt-match{font-size:14px} .receipt-status{font-size:13px} .bon-first-warning .bon-warning-title{font-size:24px} .bon-first-warning .bon-warning-text{font-size:18px} nav{width:min(1000px,100%);height:86px;grid-template-columns:repeat(7,1fr)} nav button{font-size:13px;min-height:64px} nav button span{font-size:27px} nav button span.navtiny{font-size:13px} .modal{align-items:center;padding:24px} .sheet{width:min(760px,100%);max-height:88vh;border-radius:24px;padding:22px 24px 26px} .sheethead{margin-bottom:18px} .sheethead h2{font-size:27px} .close{width:48px;height:48px;font-size:21px;border-radius:14px} /* Startseite nutzt die Tabletbreite wirklich aus. */ .on-home .app{max-width:1000px;padding-bottom:16px} .on-home main{padding:0} .reference-top{padding:16px 24px 4px} .reference-header{max-width:700px;margin:0 auto} .start-controls{max-width:940px;margin:0 auto;padding:0 26px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .mode-switch{grid-column:1/-1;margin:4px 0 0} .mode-switch button{min-height:64px;font-size:22px;padding:14px 10px} .mode-switch .ui-icon{width:36px;height:36px} .home-search-wrap{grid-column:1/-1;margin:0;padding:16px 22px;min-height:68px} #homeSearch{font-size:28px} #homeResults{grid-column:1/-1;margin:0} #homeResults .search-result{font-size:23px;min-height:72px} .all-articles-hero,.favorite-hero{min-height:78px;margin:0;font-size:24px} .all-articles-hero{grid-column:1} .favorite-hero{grid-column:2} .category-tiles{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0!important} .category-tiles button{min-height:126px!important;padding:14px 10px!important;border-radius:22px!important} .category-tiles .category-symbol{font-size:50px!important} .category-tiles button strong{font-size:18px!important;line-height:1.2!important} .basket-hero{grid-column:1/-1;min-height:86px;margin:0;font-size:32px;padding:18px 26px} .basket-hero small{font-size:20px} .home-footer{grid-column:1/-1;gap:14px;margin:0} .home-footer>button,.home-footer>div{min-height:86px;padding:14px 18px} .home-footer strong{font-size:18px} .home-footer small{font-size:14px} .home-footer>div{font-size:16px} .home-quicklinks{grid-column:1/-1;padding:2px 0 0;gap:6px} .home-quicklinks button{min-height:48px;padding:10px 18px;font-size:16px;border-radius:12px} /* Vergleich: auf Tablet größere Karten; auf Hochformat bewusst eine Spalte für gute Lesbarkeit. */ .compare-mobile-title{font-size:21px;padding:16px 18px 12px} .compare-mobile-subtitle{font-size:14px} .compare-mobile-edit{font-size:14px} .compare-mobile-store{padding:14px 18px} .compare-mobile-storename{font-size:18px} .compare-mobile-price{font-size:23px} .compare-mobile-detail,.compare-mobile-fair,.compare-mobile-badge,.compare-mobile-result,.compare-mobile-note{font-size:14px} .compare-mobile-card{border-radius:18px;margin-bottom:15px} } /* Breite Tablets / Querformat: Vergleichskarten paarweise statt endloser Einspaltenliste. */ @media (min-width:900px){ .compare-mobile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .compare-mobile-card{margin-bottom:0} .compare-mobile-note{grid-column:1/-1;margin-top:2px} } /* ======================================== LIVIKAO – Artikelliste besser lesbar Handy + Tablet ======================================== */ .article-name strong { font-size: 18px; } .article-name small { font-size: 14px; } .edit-pencil { font-size: 25px; color: #2284c5; background: #eaf4fb; border-radius: 10px; width: 40px; min-height: 40px; } /* Tablet */ @media (min-width: 768px) { .article-name strong { font-size: 19px; } .article-name small { font-size: 15px; } .edit-pencil { font-size: 28px; width: 44px; min-height: 44px; } } /* Richtiger Preisvergleich – Tabelle auf allen Geräten */ .compare-desktop { display: block !important; } .compare-mobile { display: none !important; } /* ======================================== LIVIKAO – Preisvergleich kompakt auf dem Handy Tablet ab 700px bleibt unverändert. Auch im Handy-Querformat bleibt die kompakte Tabelle aktiv. ======================================== */ @media (max-width: 699px), (orientation: landscape) and (max-height: 600px) { #vergleich .compare-desktop > div { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #vergleich .compare-desktop table { min-width: 0 !important; width: max-content !important; font-size: 12px !important; } #vergleich .compare-desktop th, #vergleich .compare-desktop td { padding: 6px 4px !important; line-height: 1.25 !important; } #vergleich .compare-desktop th:first-child, #vergleich .compare-desktop td:first-child { min-width: 112px !important; width: 112px !important; max-width: 112px !important; font-size: 12px !important; overflow-wrap: anywhere; } #vergleich .compare-desktop th:not(:first-child):not(:last-child), #vergleich .compare-desktop td:not(:first-child):not(:last-child) { min-width: 104px !important; width: 104px !important; max-width: 104px !important; } #vergleich .compare-desktop th:last-child, #vergleich .compare-desktop td:last-child { display: none !important; } #vergleich .compare-desktop td > div { font-size: 11px !important; line-height: 1.25 !important; } #vergleich .compare-desktop td > div:first-child { font-size: 14px !important; } #vergleich .compare-desktop td:first-child > div { font-size: 10px !important; } #vergleich .compare-desktop button { font-size: 10px !important; line-height: 1.2 !important; } #vergleich .head h1 { font-size: 22px !important; } #vergleich .head p { font-size: 11px !important; line-height: 1.3 !important; } } /* 2026-09-13: Artikelsuche, Filterzeile und gut bedienbare Mengenauswahl */ .shopping-search-wrap{ display:flex;align-items:center;gap:11px;margin:0 0 10px;padding:10px 13px; border:2px solid #c7e2f3;border-radius:14px;background:#fff;color:#207bbb; } .shopping-search-wrap>span{font-size:27px;line-height:1;flex:0 0 auto;font-weight:800} #shoppingSearch{ width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important; padding:5px 2px!important;font:inherit;font-size:18px!important;color:var(--text)!important; } #shoppingSearch::placeholder{color:#718392} .shopping-search-wrap:focus-within{border-color:#2284c5;box-shadow:0 0 0 3px #2284c522} .shopping-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;margin-bottom:10px} .shopping-filter-row .favorites-link,#categoryFilter{margin:0!important;min-width:0} .shopping-filter-row .favorites-link,#categoryFilter select{ width:100%;height:100%;min-height:48px;box-sizing:border-box;border:1px solid #c7e2f3!important; border-radius:12px!important;background:#eef7fc!important;color:#207bbb!important; padding:10px 9px!important;font:inherit;font-size:14px!important;font-weight:800!important; } #categoryFilter select{appearance:auto;cursor:pointer} .drag-grip{font-size:29px!important;color:#2785c4!important;font-weight:900!important;line-height:1!important} .shopping-done-check{accent-color:#459c3b} .shopping-quantity-line{font-size:14px!important;font-weight:800!important;color:#2f6f98!important;margin-top:4px!important} .quantity-dialog{padding:3px 0 2px;text-align:center} .quantity-question{font-size:20px;font-weight:800;line-height:1.35;margin:8px 0 18px;color:#183c58} .quantity-picker{display:grid;grid-template-columns:82px minmax(90px,1fr) 82px;gap:12px;align-items:center;margin:0 auto 16px;max-width:380px} .quantity-step{ width:82px;height:82px;border:0;border-radius:22px;background:#2785c4;color:#fff; font-family:inherit;font-size:52px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 3px 10px #1b567c22; touch-action:manipulation; } .quantity-step:active{transform:scale(.97);background:#1c73aa} #shoppingQty{ width:100%;height:82px;box-sizing:border-box;border:3px solid #bcd8ea;border-radius:20px; background:#fff;text-align:center;font-family:inherit;font-size:38px;font-weight:900;color:#173c58; -moz-appearance:textfield; } #shoppingQty::-webkit-outer-spin-button,#shoppingQty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .quantity-price-preview{min-height:48px;margin:4px auto 18px;padding:12px 13px;border-radius:13px;background:#eef7fc;color:#245b7c;font-size:17px;font-weight:800;line-height:1.35;max-width:420px} .quantity-save{font-size:19px!important;min-height:54px} @media(max-width:380px){ .shopping-filter-row{grid-template-columns:1fr} .quantity-picker{grid-template-columns:74px minmax(78px,1fr) 74px;gap:9px} .quantity-step{width:74px;height:74px;font-size:48px} #shoppingQty{height:74px;font-size:34px} } @media(min-width:700px){ #shoppingSearch{font-size:20px!important} .shopping-filter-row .favorites-link,#categoryFilter select{font-size:16px!important;min-height:54px} .quantity-picker{grid-template-columns:92px minmax(105px,1fr) 92px;max-width:430px} .quantity-step{width:92px;height:92px;font-size:58px} #shoppingQty{height:92px;font-size:42px} } /* LIVIKAO 2026-09-13: Mengeneinheit als gut bedienbares Pflicht-Dropdown */ .quantity-unit-wrap{max-width:380px;margin:0 auto 16px;text-align:left} .quantity-unit-wrap label{display:block;margin:0 0 6px 4px;font-size:16px;font-weight:900;color:#183c58} .quantity-unit-wrap label b{color:#b23b32} #shoppingUnit{ width:100%;height:82px;box-sizing:border-box;border:3px solid #bcd8ea;border-radius:20px; background:#fff;padding:0 18px;font-family:inherit;font-size:25px;font-weight:900;color:#173c58; cursor:pointer;outline:0; } #shoppingUnit:focus{border-color:#2785c4;box-shadow:0 0 0 3px #2785c422} .unit-field select{min-height:54px;font-size:18px;font-weight:800;border:2px solid #c8dce9;border-radius:13px;background:#fff;color:#173c58;padding:10px 12px} @media(max-width:380px){ .quantity-unit-wrap{max-width:100%} #shoppingUnit{height:74px;font-size:22px} } @media(min-width:700px){ .quantity-unit-wrap{max-width:430px} #shoppingUnit{height:92px;font-size:29px} } /* 2026-09-13: Fehlende Preise/Einheiten im Vergleich deutlich kennzeichnen */ .compare-product-link{ display:inline-block;border:0;background:transparent;padding:0;color:#163b57; font:inherit;font-weight:900;text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:3px;cursor:pointer;text-align:left; } .compare-product-link:hover{color:#1f78ad} .compare-missing-price{ background:#fff0d4 !important; box-shadow:inset 0 0 0 3px #ef9d24 !important; color:#6b3c00 !important; text-align:center !important; cursor:pointer; } .compare-missing-price:hover{background:#ffe5b5 !important;box-shadow:inset 0 0 0 4px #e78600 !important} .missing-price-value{font-size:20px;font-weight:950;color:#8b4d00} .missing-price-alert{margin-top:4px;font-size:13px;font-weight:950;letter-spacing:.2px;color:#a54800} .missing-price-unit{margin-top:3px;font-size:12px;font-weight:800;color:#8b5a1d} .missing-price-action{margin-top:6px;font-size:12px;font-weight:950;color:#166da0;text-decoration:underline} .compare-partial-total{ text-align:center !important;background:#fff6e6 !important;color:#6a4a1e !important; box-shadow:inset 0 0 0 2px #e8b35c !important; } .partial-total-value{font-size:21px;font-weight:950;color:#7a4e10} .partial-total-label{margin-top:3px;font-size:12px;font-weight:800;color:#776044} .partial-total-warning{margin-top:5px;font-size:12px;font-weight:950;color:#b15d00} button.mobile-missing{display:block;width:100%;border:0;font-family:inherit;padding:12px;text-align:left} button.mobile-missing .missing-price-alert, button.mobile-missing .missing-price-unit, button.mobile-missing .missing-price-action{text-align:left} @media (max-width:699px), (orientation: landscape) and (max-height:600px){ #vergleich .compare-desktop .compare-missing-price .missing-price-value{font-size:14px !important} #vergleich .compare-desktop .compare-missing-price .missing-price-alert{font-size:9px !important;line-height:1.15 !important} #vergleich .compare-desktop .compare-missing-price .missing-price-unit{font-size:9px !important} #vergleich .compare-desktop .compare-missing-price .missing-price-action{font-size:9px !important} #vergleich .compare-desktop .compare-partial-total .partial-total-value{font-size:14px !important} #vergleich .compare-desktop .compare-partial-total .partial-total-label, #vergleich .compare-desktop .compare-partial-total .partial-total-warning{font-size:9px !important} } /* 2026-09-13: Summen trotz Preis-/Einheitslücken anzeigen */ .compare-incomplete-flag{ margin-top:5px; font-size:14px; line-height:1.15; font-weight:950; color:#a94700; letter-spacing:.35px; text-transform:uppercase; } @media(min-width:700px){ .compare-incomplete-flag{font-size:15px} } /* 2026-09-13: eine Vergleichseinheit pro Artikel – gilt für alle Läden */ .comparison-unit-master{ margin:14px 0 18px;padding:14px 15px;border:2px solid #9fcbe7;border-radius:16px;background:#eef8ff; } .comparison-unit-master label{display:block;margin-bottom:7px;font-size:17px;font-weight:900;color:#173c58} .comparison-unit-master select{ width:100%;min-height:58px;border:2px solid #8fc2e1;border-radius:13px;background:#fff; padding:10px 12px;font-family:inherit;font-size:20px;font-weight:900;color:#173c58; } .comparison-unit-master .note{margin:9px 1px 0;font-size:15px;line-height:1.45;color:#355d78} .article-unit-badge{ margin:10px 0 2px;padding:9px 11px;border-radius:11px;background:#f7fbfe; color:#245b7c;font-size:15px;font-weight:800;border:1px solid #cfe2ee; } .quantity-unit-hint{display:block;margin:7px 4px 0;color:#507189;font-size:14px;font-weight:700}