/* Preisfehler Heute Finden – Stylesheet Vollständig aus dem Prototyp v0.7 übernommen (beide Style-Blöcke). Farben (hell/dunkel + 8 Akzente), Layout, Deal-Karten, Voting/Deal-Score, Kommentare, Formulare, Admin-Ansichten. */ /* ============================================================ PREISFEHLER HEUTE – Design-Tokens Palette: Signalrot (Rabattschild), Preisschild-Gelb, Kupon-Violett, Sparabo-Minze, Info-Blau, Tinte/Papier Später 1:1 als CSS-Variablen in Laravel/Blade übernehmbar. ============================================================ */ :root{ --bg:#F3F4F7; --bg-tr:rgba(243,244,247,.88); --card:#FFFFFF; --card2:#F6F7FA; --ink:#1A1622; --mut:#6B6E7B; --line:#E7E8EE; --line2:#D7D9E2; --cta:#DC1F3E; --cta-hi:#C41733; --brand-soft:#FCE8EC; --brand-ink:#B01230; --yel:#FFD23F; --yel-soft:#FFF3C7; --yel-ink:#6B5500; --vio:#6C4DF4; --vio-soft:#EDEAFE; --vio-ink:#4A32C0; --mint:#0FA47A; --mint-soft:#E0F5ED; --mint-ink:#0A6B50; --blue:#2F7DEB; --blue-soft:#E7F0FD; --blue-ink:#1D5BBE; --gray-soft:#ECEDF2; --gray-ink:#4B4F5A; --shadow:0 1px 2px rgba(22,18,32,.05),0 10px 28px rgba(22,18,32,.07); --r:16px; --rs:13px; --disp:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,-apple-system,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } [data-theme="dark"]{ --bg:#131019; --bg-tr:rgba(19,16,25,.85); --card:#1D1926; --card2:#252031; --ink:#F2EFF8; --mut:#9C98AC; --line:#2C2738; --line2:#3B3449; --cta:#F02A4C; --cta-hi:#FF3D5F; --brand-soft:#39131E; --brand-ink:#FF8CA0; --yel:#FFD23F; --yel-soft:#3B3110; --yel-ink:#FFDF74; --vio:#8A6EFF; --vio-soft:#251D4A; --vio-ink:#B3A0FF; --mint:#22C593; --mint-soft:#0E2E24; --mint-ink:#4ADDAC; --blue:#4C93F5; --blue-soft:#132A46; --blue-ink:#7FB2FF; --gray-soft:#2A2636; --gray-ink:#BBB7C8; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.35); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font:15px/1.5 var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select{font:inherit;color:inherit} img,svg{display:block} :focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:8px} /* Icons (Inline-Sprite) */ .i{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none} /* ---------- App-Shell ---------- */ #app{max-width:520px;margin:0 auto;min-height:100dvh;padding:0 0 84px} .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-tr);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .logomark{width:36px;height:36px;border-radius:50%;background:var(--cta);color:#fff;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 0 0 2.5px var(--card),0 3px 8px rgba(0,0,0,.22);flex:none} .logomark .i{width:19px;height:19px;stroke-width:2.4} .wordmark{font:800 18px/1 var(--disp);letter-spacing:-.02em;white-space:nowrap} .wordmark em{font-style:normal;color:var(--cta)} .protochip{font:600 10.5px var(--body);letter-spacing:.04em;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:3px 8px;white-space:nowrap} .ibtn{width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--mut);position:relative;transition:border-color .15s} .ibtn:hover{border-color:var(--line2)} .ibtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--cta);border:2px solid var(--card)} .topnav{display:none} /* ---------- Screens ---------- */ .screen{display:none;padding:0 16px} .screen.on{display:block;animation:screenIn .18s ease} @keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .shead{display:flex;align-items:center;gap:10px;padding:16px 0 12px} .shead h2{font:700 20px/1.2 var(--disp);letter-spacing:-.01em;flex:1} .shead .sub{font-size:12.5px;color:var(--mut);font-weight:500} .lbl{display:block;font:600 12.5px var(--body);letter-spacing:.03em;text-transform:uppercase;color:var(--mut);margin:18px 0 9px} .hscroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none} .hscroll::-webkit-scrollbar{display:none} /* ---------- Chips & Tags ---------- */ .chip{flex:none;display:inline-flex;align-items:center;gap:6px;font:600 13px var(--body);padding:8px 13px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut);transition:.15s;white-space:nowrap} .chip .i{width:14px;height:14px} .chip.on{background:var(--cta);color:#fff;border-color:transparent} .chip.vio{background:var(--vio-soft);color:var(--vio-ink);border-color:transparent} .tag{display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--body);padding:3.5px 8px;border-radius:7px;white-space:nowrap} .tag .i{width:13px;height:13px;stroke-width:2.4} .t-red{background:var(--brand-soft);color:var(--brand-ink)} .t-yel{background:var(--yel-soft);color:var(--yel-ink)} .t-vio{background:var(--vio-soft);color:var(--vio-ink)} .t-mint{background:var(--mint-soft);color:var(--mint-ink)} .t-blue{background:var(--blue-soft);color:var(--blue-ink)} .t-gray{background:var(--gray-soft);color:var(--gray-ink)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;font:600 14.5px var(--body);padding:12px 18px;border:1px solid transparent;transition:.15s} .btn:active{transform:scale(.98)} .btn .i{width:17px;height:17px} .btn-cta{background:var(--cta);color:#fff;flex:1} .btn-cta:hover{background:var(--cta-hi)} .btn-bell{width:48px;padding:0;background:var(--brand-soft);color:var(--brand-ink);flex:none} .btn-line{background:var(--card);border-color:var(--line2);color:var(--ink)} .btn-ghost{color:var(--mut)} .btn-block{width:100%} /* ---------- Feed ---------- */ .searchfake{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--mut);font-size:14px;width:100%;margin:12px 0;box-shadow:var(--shadow)} .liverow{display:flex;align-items:center;gap:8px;margin:10px 0 12px;font:600 12.5px var(--body);color:var(--mint-ink)} .pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .newpill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 12px var(--body);color:var(--vio-ink);background:var(--vio-soft);border-radius:99px;padding:6px 12px} .newpill .i{width:13px;height:13px} #feed-list,.results{display:grid;gap:12px} /* ---------- Deal-Karte ---------- */ .deal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:84px 1fr;gap:12px;cursor:pointer;position:relative;transition:transform .12s,border-color .15s} .deal:hover{border-color:var(--line2)} .deal:active{transform:scale(.99)} .deal.hot{border:1.5px solid var(--cta)} .thumb{width:84px;height:84px;border-radius:14px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;color:var(--mut);position:relative} .thumb .i{width:32px;height:32px;stroke-width:1.7} .stkr{position:absolute;left:-9px;top:-9px;min-width:46px;height:46px;padding:0 4px;border-radius:50%;background:var(--cta);color:#fff;display:grid;place-items:center;font:800 12.5px var(--disp);letter-spacing:-.02em;transform:rotate(-8deg);box-shadow:0 0 0 2.5px var(--card),0 3px 8px rgba(0,0,0,.25)} .stkr.gray{background:var(--gray-soft);color:var(--gray-ink);box-shadow:0 0 0 2.5px var(--card)} .dbody{min-width:0} .dtags{display:flex;gap:6px;flex-wrap:wrap} .deal h3{font:600 14px/1.35 var(--body);margin:7px 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .price b{font:800 22px/1 var(--disp);letter-spacing:-.02em;color:var(--cta)} .price s{color:var(--mut);font-size:13px} .price .abo{font:600 11.5px var(--body);color:var(--mint-ink)} .meta{font-size:12px;color:var(--mut);margin-top:4px} .dact{grid-column:1/-1;display:flex;gap:8px;margin-top:2px} .deal.off .thumb .i,.deal.off h3{color:var(--mut)} .deal.off .price b{color:var(--mut);text-decoration:line-through;font-size:17px} /* ---------- Detail ---------- */ .hero{background:var(--card);border:1px solid var(--line);border-radius:20px;height:212px;display:grid;place-items:center;color:var(--mut);position:relative;margin-bottom:14px;box-shadow:var(--shadow)} .hero .i{width:64px;height:64px;stroke-width:1.4} .hero .stkr{width:66px;height:66px;min-width:66px;font-size:16px;left:14px;top:14px} .bigprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 2px} .bigprice b{font:800 32px/1 var(--disp);letter-spacing:-.03em;color:var(--cta)} .bigprice s{color:var(--mut);font-size:15px} .saveline{font:600 13px var(--body);color:var(--mint-ink);margin-bottom:12px} .inforow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px} .inforow span:first-child{color:var(--mut)} .inforow b{font-weight:600} .mono{font-family:var(--mono);font-size:13px;letter-spacing:.5px} .coupon{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px dashed var(--vio);background:var(--vio-soft);color:var(--vio-ink);border-radius:14px;padding:13px 15px;font:600 14px var(--body);margin:14px 0} .coupon code{font:700 16px var(--mono);letter-spacing:2px} .copybtn{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--body);color:var(--vio-ink)} .note{display:flex;gap:10px;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;margin:10px 0} .note .i{width:18px;height:18px;margin-top:1px} .n-blue{background:var(--blue-soft);color:var(--blue-ink)} .n-yel{background:var(--yel-soft);color:var(--yel-ink)} .n-gray{background:var(--card2);color:var(--ink);border:1px solid var(--line)} .ctadock{position:sticky;bottom:88px;display:flex;gap:8px;padding:10px;margin:18px -6px 0;background:var(--bg-tr);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;z-index:5} .linkhint{text-align:center;font-size:11.5px;color:var(--mut);margin-top:8px} /* ---------- Formulare ---------- */ .text{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--card);font:15px var(--body);color:var(--ink)} .text::placeholder{color:var(--mut)} .text:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px var(--brand-soft)} select.text{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat} .seg{display:flex;background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:3px;gap:3px} .seg button{flex:1;padding:9px 6px;border-radius:10px;font:600 13px var(--body);color:var(--mut);transition:.15s} .seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:var(--line2)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cta);border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer} input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--cta);border:3px solid var(--card);cursor:pointer} .rangeval{font:800 15px var(--disp);color:var(--cta);min-width:52px;text-align:right} .sw{position:relative;width:47px;height:28px;flex:none} .sw input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0} .sw i{position:absolute;inset:0;border-radius:99px;background:var(--line2);transition:.2s} .sw i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s} .sw input:checked+i{background:var(--mint)} .sw input:checked+i::after{transform:translateX(19px)} .opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;margin-bottom:9px;transition:.15s} .opt .grow{flex:1;min-width:0} .opt .ttl{display:block;font-weight:600;font-size:14.5px} .opt .sub{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.4} .opt.on{border-color:var(--cta);background:var(--brand-soft)} .cb{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;flex:none;background:var(--card)} .opt.on .cb{background:var(--cta);border-color:var(--cta);color:#fff} .cb .i{width:13px;height:13px;stroke-width:3} .rdot{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none} .rdot::after{content:"";width:11px;height:11px;border-radius:50%;background:transparent} .opt.on .rdot{border-color:var(--cta)} .opt.on .rdot::after{background:var(--cta)} .ogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ocard{display:grid;justify-items:center;gap:8px;padding:16px 10px;border:1px solid var(--line);border-radius:15px;background:var(--card);font:600 13.5px var(--body);cursor:pointer;text-align:center;transition:.15s} .ocard .i{width:23px;height:23px;color:var(--mut)} .ocard.on{border-color:var(--cta);background:var(--brand-soft)} .ocard.on .i{color:var(--brand-ink)} .stepper{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:13px;background:var(--card);overflow:hidden} .stepper button{width:42px;height:42px;display:grid;place-items:center;color:var(--mut)} .stepper b{width:44px;text-align:center;font:800 16px var(--disp)} .steps{display:flex;gap:6px;margin:2px 0 18px} .steps i{height:4px;flex:1;border-radius:2px;background:var(--line2);transition:.2s} .steps i.on{background:var(--cta)} .wstep{display:none} .wstep.on{display:block;animation:screenIn .18s ease} .wnav{display:flex;gap:10px;margin-top:22px} .inline{display:flex;align-items:center;gap:10px} /* ---------- Alerts ---------- */ .al{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:11px} .aic{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center} .aic .i{width:20px;height:20px} .al .name{font:600 14.5px var(--body)} .al .cond{font-size:12.5px;color:var(--mut);margin-top:2px} .al .chans{display:flex;align-items:center;gap:8px;margin-top:7px;color:var(--mut);font-size:11.5px} .al .chans .i{width:14px;height:14px} .al .right{display:grid;gap:10px;justify-items:end} .al .mini{display:flex;gap:4px} .al .mini button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--mut)} .al .mini button:hover{background:var(--card2)} .al .mini .i{width:15px;height:15px} .al.paused .aic{background:var(--gray-soft);color:var(--mut)} .al.paused .name{color:var(--mut)} .fab{position:fixed;right:18px;bottom:96px;width:58px;height:58px;border-radius:19px;background:var(--cta);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(220,31,62,.45);z-index:30} .fab .i{width:24px;height:24px;stroke-width:2.4} .empty{text-align:center;padding:44px 20px;color:var(--mut)} .empty .bigic{width:74px;height:74px;border-radius:50%;background:var(--card2);display:grid;place-items:center;margin:0 auto 14px} .empty .bigic .i{width:30px;height:30px} /* ---------- Benachrichtigungen ---------- */ .nf{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start} .nic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none} .nic .i{width:18px;height:18px} .nf .grow{flex:1;min-width:0} .nf p{font-size:13.5px;line-height:1.45} .nf p b{font-weight:600} .nf .time{font-size:11.5px;color:var(--mut);margin-top:3px} .nf .unread{width:9px;height:9px;border-radius:50%;background:var(--cta);margin-top:6px;flex:none} /* ---------- Auth / Mehr / Telegram ---------- */ .centerwrap{max-width:420px;margin:0 auto;padding-top:5vh} .authlogo{display:grid;justify-items:center;gap:12px;margin-bottom:26px;text-align:center} .authlogo .logomark{width:58px;height:58px} .authlogo .logomark .i{width:28px;height:28px} .authlogo h2{font:800 24px var(--disp);letter-spacing:-.02em} .authlogo p{color:var(--mut);font-size:14px} form.stack{display:grid;gap:11px;margin-top:16px} .hint{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 12px} .hint .i{width:16px;height:16px;margin-top:1px;flex:none} a.tlink,.tlink{color:var(--cta);font-weight:600;text-decoration:none;font-size:13.5px} .row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);padding:14px;border-radius:14px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow)} .ric{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none} .row .grow{flex:1;min-width:0} .row .ttl{display:block;font-weight:600;font-size:14.5px} .row .sub{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.4} .row>.i{color:var(--mut)} .stat{font:600 11.5px var(--body);padding:4px 9px;border-radius:99px} .profile{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)} .ava{width:54px;height:54px;border-radius:50%;background:var(--cta);color:#fff;display:grid;place-items:center;font:800 19px var(--disp);flex:none} .codebox{border:1.5px dashed var(--vio);background:var(--vio-soft);color:var(--vio-ink);border-radius:16px;padding:18px;text-align:center;margin:14px 0} .codebox code{font:700 24px var(--mono);letter-spacing:5px;display:block;margin-bottom:8px} .stepli{display:flex;gap:12px;padding:10px 0;font-size:14px;line-height:1.5} .stepnum{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font:700 13px var(--disp);flex:none;margin-top:1px} .foot{text-align:center;font-size:12px;color:var(--mut);padding:26px 0 10px;line-height:1.6} /* ---------- Bottom-Nav & Toast ---------- */ .bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg-tr);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)} .bnav .inner{max-width:520px;margin:0 auto;display:flex;padding:7px 8px calc(7px + env(safe-area-inset-bottom))} .bn{flex:1;display:grid;justify-items:center;gap:3px;font:600 11px var(--body);color:var(--mut);padding:7px 4px;border-radius:12px;position:relative} .bn .i{width:21px;height:21px} .bn.on{color:var(--cta)} .bn .cnt{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:9px;background:var(--cta);color:#fff;font:700 10px/16px var(--body);text-align:center;padding:0 4px} #toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:var(--bg);font:600 13.5px var(--body);padding:12px 18px;border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.22s;z-index:99;max-width:92vw;text-align:center} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- Desktop ≥ 960px ---------- */ @media (min-width:960px){ #app{max-width:1140px;padding:0 0 48px} .topbar{padding:14px 28px;gap:16px} .topnav{display:flex;gap:4px;margin-right:auto} .topnav button{font:600 14px var(--body);color:var(--mut);padding:9px 15px;border-radius:11px} .topnav button.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow)} .logo{flex:none} .bnav,.fab{display:none} .screen{padding:0 28px} #feed-list,.results{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px} .shead h2{font-size:26px} .searchfake{max-width:560px} .screen-n{max-width:560px;margin:0 auto} .searchgrid{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start} .filterpane{position:sticky;top:86px} .hero{height:290px} .ctadock{bottom:18px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} } /* v0.2 – Logo-Lockup */ .wordmark{display:grid;gap:2px;line-height:1;font:800 16.5px var(--disp);letter-spacing:-.02em;white-space:nowrap} .wordmark small{font:700 9.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--cta)} .wordmark--lg{font-size:26px;justify-items:center;gap:5px} .wordmark--lg small{font-size:11px} /* v0.2 – kleinere Rabatt-Sticker */ .stkr{min-width:38px;height:38px;font-size:11px;left:-7px;top:-7px} .hero .stkr{width:54px;height:54px;min-width:54px;font-size:13px;left:12px;top:12px} /* v0.2 – Ansichten: Kacheln / Liste / Fenster */ .view-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important} .view-grid .deal{grid-template-columns:1fr;padding:10px;gap:8px} .view-grid .thumb{width:100%;height:108px} .view-grid .dtags,.view-grid .meta,.view-grid .dact{display:none} .view-grid .deal h3{font-size:13px;margin:2px 0 4px} .view-grid .price b{font-size:18px} .view-grid .price s{font-size:11.5px} .view-solo{grid-template-columns:1fr!important} .view-solo .deal{grid-template-columns:1fr;width:100%;max-width:560px;margin:0 auto} .view-solo .thumb{width:100%;height:200px} .view-solo .thumb .i{width:44px;height:44px} .view-solo .deal h3{font-size:16px;-webkit-line-clamp:3} .view-solo .price b{font-size:26px} .view-solo .stkr{min-width:46px;height:46px;font-size:13px} @media(min-width:960px){ .view-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))!important} .view-solo .deal{max-width:640px} } /* v0.4 – Community: Bewerten, Ranking, Profil, Einreichen */ .vote{display:inline-flex;align-items:center;gap:5px;font:700 12.5px var(--body);padding:6px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--card);color:var(--mut);transition:.14s} .vote:active{transform:scale(.95)} .vote .em{font-size:14px;line-height:1} .vote.hot.on{background:var(--brand-soft);border-color:transparent;color:var(--brand-ink)} .vote.cold.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)} .votes{display:flex;gap:7px;align-items:center;margin-top:9px;flex-wrap:wrap} .dscore{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--body);padding:4px 10px;border-radius:99px;white-space:nowrap} .hinttiny{display:block;font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:6px} .dscore b{font:800 14px var(--disp);letter-spacing:-.02em;line-height:1} .dscore span{line-height:1} .dscore.sc-hi{background:var(--mint-soft);color:var(--mint-ink)} .dscore.sc-mid{background:var(--yel-soft);color:var(--yel-ink)} .dscore.sc-lo{background:var(--blue-soft);color:var(--blue-ink)} .dscore.sc-open{background:var(--gray-soft);color:var(--mut)} .dscore.sc-open .i{opacity:.8} .vscore{font:700 12px var(--body);color:var(--mut);margin-left:2px} .deal .votes{grid-column:1/-1} .by{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mut);margin-top:5px} .by .miniava{width:16px;height:16px;border-radius:50%;object-fit:cover;background:var(--gray-soft)} .pointspill{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--body);color:var(--yel-ink);background:var(--yel-soft);border-radius:99px;padding:4px 10px} .pointspill .i{width:13px;height:13px} .ptoast{color:var(--yel)} /* Avatar in Profil & Mehr */ .avaimg{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none} .avabtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .avaupload{position:relative;overflow:hidden} .avaupload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} /* Ranking */ .rank{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:8px} .rank .pos{width:26px;text-align:center;font:800 15px var(--disp);color:var(--mut)} .rank.top .pos{color:var(--cta)} .rank .who{flex:1;font-weight:600;font-size:14px} .rank .pts{font:800 14px var(--disp);color:var(--cta)} .rank .miniava,.rank .ini{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none} .rank .ini{background:var(--gray-soft);color:var(--gray-ink);display:grid;place-items:center;font:800 14px var(--disp)} .myrank{display:flex;justify-content:space-between;align-items:center;background:var(--brand-soft);color:var(--brand-ink);border-radius:13px;padding:12px 15px;margin-bottom:12px;font-weight:700} /* Einreichen / Anonym-Umschalter */ .pubseg{display:flex;gap:8px;margin-top:4px} .pubcard{flex:1;display:flex;gap:9px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--card);cursor:pointer;font-size:13px} .pubcard.on{border-color:var(--cta);background:var(--brand-soft)} .subrow{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:9px} .subrow .st{font:600 11px var(--body);padding:3px 9px;border-radius:99px} .st-pend{background:var(--yel-soft);color:var(--yel-ink)} .st-appr{background:var(--mint-soft);color:var(--mint-ink)} .st-rej{background:var(--gray-soft);color:var(--gray-ink)} .info-inline{display:flex;gap:8px;font-size:12.5px;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-top:10px;line-height:1.5} .info-inline .i{width:15px;height:15px;margin-top:1px;flex:none} /* v0.7 – Kommentare */ .cmt{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)} .cmt:last-child{border-bottom:0} .cmt .cava{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:var(--gray-soft);color:var(--gray-ink);display:grid;place-items:center;font:800 13px var(--disp)} .cmt .cbody{flex:1;min-width:0} .cmt .chead{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cmt .cwho{font:600 13.5px var(--body)} .cmt .cwhen{font-size:11.5px;color:var(--mut)} .cmt .ctxt{font-size:13.5px;line-height:1.5;margin-top:3px;word-break:break-word} .cmt .cdel{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--mut);flex:none} .cmt .cdel:hover{background:var(--brand-soft);color:var(--brand-ink)} .cmt .cdel .i{width:14px;height:14px} .cmtbox{display:flex;gap:8px;align-items:flex-start;margin-top:12px} .cmtbox textarea{flex:1;min-height:46px;max-height:140px;padding:12px 13px;border-radius:13px;border:1px solid var(--line2);background:var(--card);font:14px var(--body);color:var(--ink);resize:vertical} .cmtbox textarea:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px var(--brand-soft)} .cmtbox .btn{padding:13px 14px;flex:none} .cmtdeal{font-size:11.5px;color:var(--mut);margin-top:3px} .cdot{width:12px;height:12px;border-radius:50%;background:var(--cta);display:inline-block;margin-right:6px;flex:none} #themeSeg button,#viewSeg button{display:inline-flex;align-items:center;justify-content:center;gap:2px} .swatches{display:flex;gap:11px;flex-wrap:wrap;align-items:center;padding:12px 2px 8px} .swd{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 0 0 1.5px var(--line2)} .swd.on{box-shadow:0 0 0 3px var(--cta)} .swreset{font:600 12px var(--body);padding:0 12px;border-radius:99px;background:var(--gray-soft);color:var(--gray-ink);height:34px} #swCustom{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer} #swCustom::-webkit-color-swatch-wrapper{padding:0} #swCustom::-webkit-color-swatch{border:0;border-radius:50%} .fab{box-shadow:0 8px 24px var(--cta-glow,rgba(220,31,62,.45))} #alNewTop{display:none} @media(min-width:960px){#alNewTop{display:inline-flex}} /* ---------- Ergänzungen fürs Laravel-Frontend ---------- Der Prototyp war eine Single-Page-App und nutzte überall