/* ============================================================ PIOS Desktop — "tee" look (authoritative, loads last) Pixel-match of temp/tee on the existing PHP markup. All values traced from tee source (Header.tsx, MenuSection.tsx, SidebarCart.tsx, index.css) — Tailwind classes → concrete CSS. Accent switches via . ============================================================ */ /* ---------- 0. Base / Surfaces / Typo ---------- */ html { scroll-behavior: smooth; } body { background: var(--tee-bg); color: var(--tee-ink); font-family: var(--tee-font-body); -webkit-font-smoothing: antialiased; } #wrapper, #main { background: var(--tee-bg); } #content.roundedL { background: var(--tee-bg); border: none; box-shadow: none; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--tee-font-display); letter-spacing: -0.01em; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--tee-bg); } ::-webkit-scrollbar-thumb { background: var(--tee-surface-2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tee-accent); } /* ---------- 1. Layout: widen legacy container + grid ---------- */ #wrapper { width: auto; max-width: 1300px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } #main, #content { width: auto; max-width: none; } .mMenuC2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; row-gap: var(--pd-sp-3, 12px); align-items: start; max-width: none; margin: 0; padding: 24px 0 64px; } .mMenuC2 #productsBox { grid-column: 1; width: auto; float: none; min-width: 0; } #orderBox { grid-column: 2; background: var(--tee-sidebar); border: 1px solid var(--tee-line); border-radius: var(--tee-r-l); box-shadow: var(--tee-shadow); padding: 24px 24px 16px; max-height: calc(100vh - 28px); overflow-y: auto; /* tee sidebar base: font-mono text-xs #E2E2E2 */ font-family: var(--tee-font-mono); font-size: 12px; color: #E2E2E2; } #orderBox::before { content: none; } /* ---------- 1b. Shop layout (index/products + static, body.shop): full-width, right-docked sidebar ---------- */ /* Opted into via class="shop" on index/products AND static.php (Impressum/Datenschutz/AGB) so the info pages share the same 2-col shell (text left, order box docked right). feedback/jobs/404 (id="jobPage") keep their own layout. Header stays a full-width top bar; below it the content column sits left, the order box docks flush to the right viewport edge, full height. */ body.shop #wrapper { max-width: none; padding: 0; } body.shop #main, body.shop #content { width: 100%; max-width: none; margin: 0; padding: 0; } body.shop #header .tee-topbar { padding: 16px 40px; } body.shop .mMenuC2 { grid-template-columns: minmax(0, 1fr) clamp(360px, 27%, 440px); column-gap: 0; margin: 0; padding: 0; align-items: stretch; } body.shop .mMenuC2 #productsBox, body.shop .mMenuC2 #static { /* static pages (Impressum etc.) share the shop 2-col shell */ grid-column: 1; min-width: 0; /* fill the track; margin:auto here shrank it to content and overflowed the column (blowing the nav into the sidebar) */ padding: 32px 40px 72px; } /* the nav is #productsBox's first child and sticks flush below the header; drop the column's top padding so its resting position already equals its sticky position (no upward jump on scroll). #static keeps its 32px top pad for the body text. */ body.shop .mMenuC2 #productsBox { padding-top: 0; } body.shop #orderBox { grid-column: 2; position: sticky; top: var(--tee-header-h); /* dock below the now-sticky header */ align-self: start; height: calc(100vh - var(--tee-header-h)); max-height: calc(100vh - var(--tee-header-h)); overflow-y: auto; border: none; border-left: 1px solid var(--tee-line); border-radius: 0; box-shadow: none; margin: 0; padding: 28px 28px 48px; } /* ---------- 2. Header (tee Header.tsx) ---------- */ #header { display: block; height: auto; /* legacy base.css fixes 180px for the old bottom-docked nav */ background: var(--tee-bg); border-bottom: 1px solid var(--tee-surface); padding: 0; border-radius: 0; position: sticky; /* pin the header while scrolling; nav + orderBox stick below it */ top: 0; z-index: 40; /* above the category nav (30) and the sticky order box */ } .tee-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; } /* brand: gold circle "23" + name + tagline */ .tee-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* operator-uploaded logo (white-on-transparent, replaces the text lockup). Reset base.css legacy #logoBox geometry (float/height/margin) + the #logoBox img leak (padding-top:7px, max-width:500px) so the flex topbar centers the logo cleanly. #logoBox .tee-logo beats #logoBox img specificity. */ #logoBox { height: auto; margin: 0; float: none; } #logoBox .tee-logo { display: block; height: 64px; width: auto; max-width: none; padding: 0; margin: 0; transition: opacity 300ms var(--tee-ease); } .tee-brand:hover .tee-logo { opacity: .85; } .tee-badge { position: relative; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top right, var(--tee-accent), #ffdb65); color: var(--tee-bg); box-shadow: 0 10px 15px -3px var(--tee-accent-soft); transition: transform 300ms var(--tee-ease); } .tee-brand:hover .tee-badge { transform: scale(1.05); } .tee-badge > span { font-family: var(--tee-font-mono); font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: -0.05em; } .tee-badge::before, .tee-badge::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 999px; background: #EF4444; } .tee-badge::before { background: #DC2626; animation: tee-ping 1.2s cubic-bezier(0,0,.2,1) infinite; } @keyframes tee-ping { 75%, 100% { transform: scale(2); opacity: 0; } } .tee-brand-txt { display: flex; flex-direction: column; } .tee-brand-txt b { font-family: var(--tee-font-display); font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: #fff; line-height: 1.1; transition: color 300ms var(--tee-ease); } .tee-brand:hover .tee-brand-txt b { color: var(--tee-accent); } .tee-brand-txt b em { font-style: normal; color: var(--tee-accent); font-size: 30px; font-weight: 800; } .tee-brand-txt small { font-family: var(--tee-font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tee-ink-soft); margin-top: -2px; } /* right controls: contact/payment info + cart status + Order Now */ .tee-actions { display: flex; align-items: center; gap: 16px; } /* address · phone · PayPal hint — sits flush-left of the cart, split off by a hairline. right-aligned so both rows share one clean edge against the divider. */ .tee-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-right: 18px; border-right: 1px solid var(--tee-line); font-family: var(--tee-font-body); line-height: 1.2; text-align: right; } .tee-contact-line { display: flex; align-items: center; gap: 11px; white-space: nowrap; } .tee-contact-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--tee-ink-soft); } .tee-contact-ic { width: 16px; height: 16px; flex: none; color: var(--tee-accent); opacity: .9; } .tee-contact-dot { width: 3px; height: 3px; border-radius: var(--tee-r-pill); background: var(--tee-line-2); } a.tee-contact-tel { color: var(--tee-ink); font-weight: 600; text-decoration: none; transition: color 300ms var(--tee-ease); } a.tee-contact-tel:hover { color: var(--tee-accent); } .tee-contact-pay { font-size: 12.5px; color: var(--tee-ink-soft); } .tee-contact-pay .tee-contact-ic { opacity: .8; } .tee-contact-pay b { color: var(--tee-ink-warm); font-weight: 600; } /* keep the topbar from crowding on narrow desktop widths */ @media (max-width: 960px) { .tee-contact { display: none; } } .tee-cartbtn { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: var(--tee-r-m); background: var(--tee-surface); border: 1px solid #2A2C2D; color: #fff; transition: all 300ms var(--tee-ease); } .tee-cartbtn:hover { background: var(--tee-surface-2); color: var(--tee-accent); } .tee-count { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--tee-accent); color: var(--tee-bg); font-family: var(--tee-font-mono); font-weight: 700; font-size: 10px; border-radius: 999px; box-shadow: var(--tee-shadow-soft); } .tee-ordernow { padding: 10px 20px; background: var(--tee-accent); color: var(--tee-bg); font-family: var(--tee-font-display); font-size: 14px; font-weight: 700; border-radius: var(--tee-r-m); text-decoration: none; box-shadow: 0 10px 15px -3px var(--tee-accent-soft); transition: all 300ms var(--tee-ease); } .tee-ordernow:hover { background: var(--tee-accent-hover); transform: scale(1.02); box-shadow: 0 10px 20px -3px var(--tee-accent-glow); } .tee-ordernow:active { transform: scale(0.98); } /* ---------- 3. Category nav → tee filter pills (sticky, above hero) ---------- */ /* nav markup = #mainMenuBox > .mMenuC > .mLinksBox > a.mLink (getMainMenuItems). On shop pages it renders inside .tee-catnav at the TOP of the content column (above the hero, productBox.php). Pill styling targets #mainMenuBox so it applies wherever the nav sits. */ .tee-catnav { position: sticky; top: var(--tee-header-h); z-index: 30; /* stick flush below the sticky header */ background: rgba(13, 13, 13, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 14px 0; margin: 0 0 8px; min-width: 0; overflow: hidden; /* nav min-content must not blow out the grid column */ } /* legacy base.css absolutely-positions #mainMenuBox (old bottom-docked nav) → put it back in flow so width is column-constrained and the pills scroll inside .mLinksBox instead of spilling over the sidebar. */ #mainMenuBox { position: static; width: auto; float: none; min-width: 0; } /* static.php renders the nav bare in #content (navigation.php, no .tee-catnav wrapper and no #productsBox 40px pad), so the pills sat flush left of the logo/content AND flush against the header above / sidebar below. Give it the .tee-catnav rhythm (14px vertical + 8px bottom margin) plus the 40px product-page gutter. Scoped via '>' to the static case only — on shop pages #mainMenuBox's parent is .tee-catnav, so this never touches the product nav. */ body.shop #content > #mainMenuBox { padding: 14px 40px; margin-bottom: 8px; } #mainMenuBox .mMenuC { width: auto; float: none; min-width: 0; } #mainMenuBox .mLinksBox { max-width: 100%; min-width: 0; } #mainMenuBox .mLinksBox { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; /* legacy .mLinksBox wraps; keep one scrolling row */ overflow-x: auto; scrollbar-width: none; /* overflow-x:auto forces overflow-y to auto → the active pill's scale(1.05)+glow would be clipped top/bottom. Pad the scroll viewport, cancel the height with a negative margin so the nav rhythm stays unchanged. */ padding: 10px 0; margin: -10px 0; } #mainMenuBox .mLinksBox::-webkit-scrollbar { display: none; } #mainMenuBox .mLink { flex: 0 0 auto; padding: 10px 24px; border-radius: 999px; font-family: var(--tee-font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0; text-decoration: none; white-space: nowrap; background: var(--tee-surface); color: var(--tee-ink-soft); border: 1px solid #2A2C2D; transition: all 300ms var(--tee-ease); } #mainMenuBox .mLink:hover { color: #fff; background: var(--tee-surface-2); } #mainMenuBox .mLink.active { background: var(--tee-accent); color: var(--tee-bg); font-weight: 900; border-color: var(--tee-accent); box-shadow: 0 4px 6px -1px var(--tee-accent-soft); transform: scale(1.05); } /* ---------- 4. Hero slider → tee welcome hero ---------- */ #productsBox .sli_cycle_wrapper, #productsBox .sli_cycle, #productsBox .sli_cycle .Slide { height: 420px !important; /* legacy inline height:250px overridden */ } #productsBox .sli_cycle_wrapper { position: relative; border-radius: var(--tee-r-xl); overflow: hidden; border: 1px solid var(--tee-surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); margin-bottom: 32px; background: #000; } #productsBox .sli_cycle .Slide { width: 100% !important; } #productsBox .sli_cycle .Slide img { width: 100%; height: 100%; object-fit: cover; opacity: .5; /* tee: img opacity-50 on black */ transition: transform 1000ms ease-out; } #productsBox .sli_cycle_wrapper:hover .Slide img { transform: scale(1.05); } /* tee gradient overlays (bottom-up + left) */ #productsBox .sli_cycle .Slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #000, rgba(0,0,0,.4) 45%, transparent), linear-gradient(to right, rgba(0,0,0,.8), transparent 55%); } /* caption block (legacy .txtCont) → tee hero content bottom-left */ #productsBox .sli_cycle .txtCont { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 48px; background: none; } #productsBox .sli_cycle .sl_title { display: block; font-family: var(--tee-font-display); font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #fff; background: none; padding: 0; margin: 0 0 10px; text-transform: uppercase; } #productsBox .sli_cycle .sl_text { display: block; max-width: 520px; font-family: var(--tee-font-body); font-size: 19px; font-weight: 300; line-height: 1.45; color: var(--tee-ink-warm); background: none; padding: 0; margin: 0; } /* slider pager dots → tee style */ .sli_cycle_pager, [id$="_pager"] { display: flex; gap: 6px; justify-content: flex-end; padding: 12px 4px; } .sli_cycle_pager a, [id$="_pager"] a { display: block; width: 28px; height: 10px; border-radius: 999px; background: var(--tee-surface); font-size: 0; text-decoration: none; transition: all 300ms var(--tee-ease); } .sli_cycle_pager a:hover, [id$="_pager"] a:hover { background: var(--tee-surface-2); } .sli_cycle_pager a.activeSlide, [id$="_pager"] a.activeSlide { background: var(--tee-accent); width: 40px; } /* ---------- 5. Welcome headline + intro (html_blocks) ---------- */ #productsBox .html_block h1, #productsBox .html_block h2 { font-family: var(--tee-font-display); font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase; margin: 18px 0 14px; color: transparent; background: linear-gradient(90deg, #fff 0%, #fff 38%, var(--tee-accent) 62%, var(--tee-accent-2) 100%); -webkit-background-clip: text; background-clip: text; } #productsBox .html_block .textColor, #productsBox .html_block p { color: var(--tee-ink-soft); font-size: 14px; line-height: 1.65; max-width: none; /* operator wants the intro text to fill the full column width */ } #productsBox .html_block .textColor b { color: var(--tee-ink); } /* ---------- 6. Section headings (.seperator) → gold display labels ---------- */ #productsBox .seperator { margin: 34px 0 18px; background: none; } #productsBox .seperator header h2 { display: flex; align-items: center; gap: 12px; font-family: var(--tee-font-display); font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tee-accent); background: none; margin: 0; line-height: 1.2; } #productsBox .seperator header h2::before { content: ""; width: 32px; height: 2px; background: var(--tee-accent); flex: 0 0 auto; } #productsBox .seperator header p { color: var(--tee-ink-soft); font-size: 14px; margin: 6px 0 0 44px; max-width: none; } /* ---------- 7. XL product card → tee Special Offer Card ---------- */ /* neutralize legacy white-label name/desc boxes (base.css:283-284: h3 #575757, p rgba(194,194,194,.95)) */ #productsBox .productsWI .r h3, #productsBox .productsWI .r p { background: none; padding: 0; } /* image cards all use the tee dish-card layout (§8); the XL card only adds the HOT OFFER badge */ #productsBox .productsWIXL { position: relative; } #productsBox .productsWIXL::before { content: "Hot Offer"; position: absolute; top: 8px; left: 8px; z-index: 3; background: #DC2626; color: #fff; font-family: var(--tee-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; box-shadow: var(--tee-shadow-soft); animation: tee-pulse 2s cubic-bezier(.4,0,.6,1) infinite; } @keyframes tee-pulse { 50% { opacity: .6; } } .p_deal { position: absolute; top: 14px; right: 14px; left: auto; width: 34px; z-index: 3; } /* body.shop: image product cards sit 2-up; hero / nav / intro / seperators / list cards span the full content column. Grid gap replaces the cards' own margins. */ body.shop #productsBox { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; align-items: start; } body.shop #productsBox > *:not(.productsWI) { grid-column: 1 / -1; } body.shop #productsBox > .productsWI { margin: 0; } /* ---------- 8. Product cards (list + small-image) ---------- */ #productsBox .products { background: var(--tee-surface); border: 1px solid var(--tee-line); border-radius: var(--tee-r-l); padding: 16px 18px; margin-bottom: 12px; cursor: default; transition: border-color 300ms var(--tee-ease), background 300ms var(--tee-ease); } #productsBox .products:hover { border-color: var(--tee-line-2); background: var(--tee-surface-2); } #productsBox .products .p-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; } #productsBox .p-info { flex: 1 1 260px; min-width: 0; } #productsBox .p-info b { font-family: var(--tee-font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--tee-ink); transition: color 300ms var(--tee-ease); } #productsBox .products:hover .p-info b { color: var(--tee-accent); } #productsBox .p-num { color: var(--tee-ink-soft); font-weight: 700; } #productsBox .p-des { color: var(--tee-ink-soft); font-size: 12px; font-weight: 300; line-height: 1.45; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p-extras-hint { color: var(--tee-accent); font-family: var(--tee-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } /* no-photo list cards (.products) span the full column → use the space: larger name/desc and a bigger mono price + plus. Single-price list price is a bare text node in (no ), so the mono rule on `.p-price a > span` never applied — set it on the directly here. Multi-size items (klein/groß) DO emit badgeprice; those are re-styled below so the price keeps this 20px look and the badge stacks above it (not the §8 pill). */ #productsBox .products .p-info b { font-size: 18px; } #productsBox .products .p-des { font-size: 13px; } /* desktop.css:241 gives .p-price a flex-direction:column + min-width:76px, and legacy makes ::after position:absolute (the § reset only covered .productsWI). With the + out of flow the column didn't matter; putting it back in flow needs row + min-width:0 so price and plus sit side by side and the price (20px) isn't clipped to 76px. */ #productsBox .products .p-price { width: auto; } #productsBox .products .p-price a { position: static; width: auto; min-width: 0; white-space: nowrap; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; font-family: var(--tee-font-mono); font-size: 20px; font-weight: 700; color: var(--tee-accent); gap: 2px 14px; /* row-gap: badge↔price tight; column-gap: price↔plus */ } #productsBox .products .p-price a::after { position: static; margin-left: 0; width: 42px; height: 42px; font-size: 24px; } /* multi-size (klein/groß): size label ABOVE the price, + beside it, price at the full 20px. A grid (scoped via :has to the badge case) makes each slot HUG its content: the earlier flex-basis:100% badge inflated the slot to ~217px, so the price sat right-aligned in a wide box → the two prices looked far apart. Grid columns = auto (content) fix that (operator 2026-07-06). label over price (left column), + spanning both rows (right column). */ #productsBox .products .p-price a:has(> b) { display: grid; grid-template-columns: auto auto; grid-template-areas: "label plus" "price plus"; align-items: center; justify-items: end; column-gap: 12px; row-gap: 2px; } #productsBox .products .p-price a > b { grid-area: label; background: none; border: none; padding: 0; color: var(--tee-ink-soft); font-family: var(--tee-font-body); font-weight: 500; font-size: 12px; } #productsBox .products .p-price a > span { grid-area: price; background: none; border: none; padding: 0; font-family: var(--tee-font-mono); font-weight: 700; font-size: 20px; color: var(--tee-accent); } #productsBox .products .p-price a:has(> b)::after { grid-area: plus; align-self: center; } /* small-image cards (.productsWI, not XL) → tee dish card */ #productsBox .productsWI { position: relative; display: flex; align-items: stretch; gap: 16px; background: var(--tee-surface); border: 1px solid var(--tee-line); border-radius: var(--tee-r-l); padding: 0; margin-bottom: 12px; height: auto !important; overflow: hidden; width: auto; float: none; transition: border-color 300ms var(--tee-ease), background 300ms var(--tee-ease); } #productsBox .productsWI:hover { border-color: var(--tee-line-2); background: var(--tee-surface-2); } #productsBox .productsWI > img { order: -1; width: 130px; min-width: 130px; min-height: 110px; height: auto; object-fit: cover; object-position: center; border-radius: 0; transition: transform 500ms var(--tee-ease); } #productsBox .productsWI:hover > img { transform: scale(1.05); } #productsBox .productsWI .r { flex: 1 1 auto; min-width: 0; padding: 14px 0 6px; position: static; width: auto; background: none; } #productsBox .productsWI .r h3 { font-family: var(--tee-font-display); /* 18px/13px lift the regular 2-up photo cards toward the XL card's type hierarchy (operator decision 2026-07-05); XL keeps 22px/13px via §8b overrides below. line-height:1.2 so a name that wraps in the narrow 2-up column (e.g. "… XXL") breathes — the inherited legacy line-height (~15.8px) crowded the enlarged name. */ font-size: 18px; line-height: 1.2; font-weight: 700; color: #fff; margin: 0 0 4px; } #productsBox .productsWI .r p { color: var(--tee-ink-soft); font-size: 13px; font-weight: 300; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #productsBox .productsWI .p-row { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 8px; padding: 12px 14px; } /* price link → tee price pill + plus circle */ #productsBox .p-price { float: none; flex: 0 0 auto; } #productsBox .p-price a { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; text-decoration: none; color: var(--tee-accent); } #productsBox .p-price a > span, #productsBox .p-price a > b { font-family: var(--tee-font-mono); font-size: 13px; font-weight: 700; color: var(--tee-accent); background: rgba(13, 13, 13, .6); border: 1px solid rgba(30, 32, 32, .8); border-radius: var(--tee-r-s); padding: 5px 9px; white-space: nowrap; } #productsBox .p-price a > b { color: var(--tee-ink-soft); font-family: var(--tee-font-body); font-weight: 500; font-size: 12px; } /* plus circle (tee: w-8 h-8 rounded-full bg-#1E2020 border-#333535) */ #productsBox .p-price a::after { content: "+"; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tee-surface); border: 1px solid #333535; color: var(--tee-ink-warm); font-size: 17px; font-weight: 600; line-height: 1; box-shadow: var(--tee-shadow-soft); transition: all 300ms var(--tee-ease); } #productsBox .p-price a:hover::after { background: var(--tee-accent); border-color: var(--tee-accent); color: var(--tee-bg); } /* dish-card price row: legacy makes .p-row position:absolute + narrow, .p-price a column, and the + (::after) absolute → overlap. Put it all back in flow: full-width row, note+price left, + button pushed right. */ #productsBox .productsWI .p-row { position: static; width: auto; margin: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 14px 14px; } #productsBox .productsWI .p-price { width: 100%; float: none; } #productsBox .productsWI .p-price a { flex-direction: row; width: 100%; gap: 8px; } #productsBox .productsWI .p-price a > b { background: none; border: none; padding: 0; color: var(--tee-ink-warm); opacity: .5; font-family: var(--tee-font-mono); font-weight: 400; font-size: 10px; white-space: nowrap; } #productsBox .productsWI .p-price a::after { position: static; margin-left: auto; flex: 0 0 auto; } /* size-label image cards: the narrow 2-up column has no room for label|price|+ in a row, so stack them vertically (label → price → +), right-aligned — same shape as the XL card. :has(>b) scopes it to the size-badge case; single-price cards keep the row + auto-pushed + (operator 2026-07-06). */ #productsBox .productsWI .p-price a:has(> b) { flex-direction: column; align-items: flex-end; gap: 4px; } #productsBox .productsWI .p-price a:has(> b)::after { margin-left: 0; } /* ---------- 8b. XL card → tee Special Offer (full width, 3 columns) ---------- */ /* Operator spec: photo left | article-no + name + description stacked | size-note / price / plus stacked on the right. The 3-column arrangement needs the full content width, so the single XL special spans both grid tracks while regular image cards stay 2-up. These rules override §8 (.productsWI) by SOURCE ORDER — equal specificity — so this block MUST stay after §8. .p-price a is DOM-ordered note, price, ::after "+" → a column flex stacks them exactly as requested with no reordering. */ body.shop #productsBox > .productsWIXL { grid-column: 1 / -1; } #productsBox .productsWIXL { align-items: stretch; } #productsBox .productsWIXL > img { width: 40%; min-width: 240px; max-width: 360px; min-height: 220px; align-self: stretch; } /* middle: article number on its own line, then name, then description */ #productsBox .productsWIXL .r { align-self: center; padding: 24px 8px 24px 4px; } #productsBox .productsWIXL .r h3 { display: block; font-size: 22px; line-height: 1.2; } #productsBox .productsWIXL .r .p-num { display: block; margin: 0 0 6px; font-family: var(--tee-font-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--tee-accent); } #productsBox .productsWIXL .r p { font-size: 13px; -webkit-line-clamp: 4; } /* right column: size note (top) → price (middle) → plus (bottom) */ #productsBox .productsWIXL .p-row { flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; padding: 24px; } #productsBox .productsWIXL .p-price { width: auto; } #productsBox .productsWIXL .p-price a { flex-direction: column; align-items: flex-end; width: auto; gap: 10px; } #productsBox .productsWIXL .p-price a > b { opacity: 1; background: none; border: none; padding: 0; color: var(--tee-ink-warm); font-family: var(--tee-font-mono); font-weight: 400; font-size: 11px; text-align: right; white-space: nowrap; } #productsBox .productsWIXL .p-price a > span { font-size: 15px; padding: 7px 12px; } #productsBox .productsWIXL .p-price a::after { margin: 0; width: 40px; height: 40px; font-size: 20px; } /* ---------- 9. JOBS marquee ticker → dark card ---------- */ /* real markup: #marquee_wrapper.frame2.bs > ul.marquee_labels (JOBS chip, float:left 114px) + ul.marquee (JS-driven ticker). Legacy (legacy-widgets.css:152-160) is content-box with padding:2px+border:1px (→ width:100% overflowed siblings by 6px), and ul.marquee.label_true is a hardcoded width:529px float:right — so a single short job posting sat marooned in the right half. Rebuild as a flex row: JOBS chip left, ticker fills the rest (text starts right after the chip), everything border-box + vertically centered. The plugin positions each
  • absolutely (top animated, left:0) — untouched; it just now scrolls inside a full-width ul. */ #marquee_wrapper { box-sizing: border-box; width: 100%; min-height: 52px; margin: 5px 0 24px; padding: 0; display: flex; align-items: stretch; background: var(--tee-surface); border: 1px solid var(--tee-line); border-radius: var(--tee-r-m); overflow: hidden; } .marquee_labels { float: none; width: auto; flex: 0 0 auto; display: flex; align-items: center; background: var(--tee-surface-2); border-radius: 0; } .marquee_labels li { color: var(--tee-accent); font-family: var(--tee-font-mono); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; padding: 0 22px; text-align: center; } /* ul height == li line box so the plugin's absolute `li{top:0}` lands vertically centered (align-self centers the tight ul in the 52px bar → ticker baseline aligns with the JOBS chip). Insets are MARGIN, not padding: overflow:hidden clips at the padding box, so padding stays visible and the running text would touch the chip / card edge — margin gives a real gap. */ ul.marquee, ul.marquee.label_true { float: none; width: auto; flex: 1 1 auto; align-self: center; height: 20px; left: 0; margin: 0 20px; padding: 0; } ul.marquee li { color: var(--tee-ink-soft); font-family: var(--tee-font-mono); font-size: 14px; line-height: 20px; padding: 0; } ul.marquee li a { color: var(--tee-accent); } ul.marquee li a:hover { color: var(--tee-accent-2); text-shadow: none; } /* ---------- 10. Sidebar sections ---------- */ .oBoxTitle { font-family: var(--tee-font-display); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--tee-ink-warm); /* tee: #D0C5AF, not gold */ margin-bottom: 12px; border-bottom: 1px solid var(--tee-surface); padding-bottom: 8px; } #voucherBox > .oBoxTitle, #cart > .oBoxTitle { color: var(--tee-accent); } #voucherBox { margin: 18px 0 20px; } #voucherBox > summary.oBoxTitle { position: relative; cursor: pointer; list-style: none; padding-right: 34px; user-select: none; } #voucherBox > summary.oBoxTitle::-webkit-details-marker { display: none; } #voucherBox > summary.oBoxTitle::after { content: "+"; position: absolute; right: 0; top: 50%; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid rgba(212, 175, 55, .38); border-radius: 999px; color: var(--tee-accent); font-family: var(--tee-font-body); font-size: 16px; line-height: 1; transform: translateY(-50%); } #voucherBox[open] > summary.oBoxTitle::after { content: "−"; } #voucherBox:not([open]) > summary.oBoxTitle { margin-bottom: 0; } #voucherBox[open] > summary.oBoxTitle { margin-bottom: 12px; } #voucherBox:not([open]) > #voucherForm { display: none; } #voucherBox > summary.oBoxTitle:focus-visible { outline: none; color: var(--tee-accent-hover); } #sendOrderBox { background: transparent; border: none; padding: 0; } /* cart list */ #cart { margin-right: 0; } /* reset legacy base.css:295 `#cart{margin-right:6px}` so item prices share the totals' right edge */ #cart #allCart { list-style: none; margin: 0 0 8px; padding: 0; max-height: 260px; overflow-y: auto; } #cart li.item { background: none; border: none; border-bottom: 1px solid rgba(30, 32, 32, .4); border-radius: 0; padding: 10px 2px; margin: 0; color: var(--tee-ink); font-size: 13px; } #cart li.item > p:first-child { display: flex; justify-content: space-between; gap: 8px; } #cart li.item > p:first-child b { font-family: var(--tee-font-body); font-weight: 700; color: #fff; line-height: 1.3; } #cart li.item .preprice { color: var(--tee-ink-soft); font-size: 11px; font-family: var(--tee-font-body); } #cart #extras { list-style: none; margin: 6px 0 0; padding: 0 0 0 8px; border-left: 1px solid var(--tee-accent-soft); font-family: var(--tee-font-body); font-size: 10px; } #cart #extras li { background: none; color: rgba(212, 175, 55, .8); display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; } #cart #extras li span:first-of-type { color: var(--tee-ink-soft); font-family: var(--tee-font-mono); font-size: 9px; } #cart #extras li.menu_item { color: var(--tee-ink-warm); } /* Extras are display-only in the tee sidebar (like SidebarCart): keep the per-extra delete link hidden — the legacy `#cart ul li ul li:hover .delCartExtra{display:inline}` reveal shifted the price by ~130px and had no tee styling. Editing a single extra stays available via the item's "EXTRAS" button; the whole item via "LÖSCHEN". (2 ids beat the legacy 1-id :hover reveal.) */ #cart #extras li .delCartExtra { display: none; } #cart li.item > p:last-child { display: flex; align-items: center; gap: 6px; margin-top: 8px; } #cart li.item .price { margin-left: auto; font-weight: 700; color: var(--tee-accent); } #cart .delItem, #cart .editExtras { font-family: var(--tee-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0; color: var(--tee-ink-soft); background: var(--tee-surface); border: 1px solid transparent; border-radius: 4px; width: auto; height: 20px; padding: 0 8px; cursor: pointer; transition: all 200ms var(--tee-ease); } #cart .delItem:hover { color: #F87171; background: var(--tee-surface-2); } #cart .editExtras:hover { color: var(--tee-accent); background: var(--tee-surface-2); } /* totals (tee: boxed panel with SUMME + MOV row) float/width/margin reset: legacy base.css floats these right with fixed 140px widths + ad-hoc right margins (#sCostsB/#sPledgeB/#discount_wrapper) → jagged right edges. Full-width + uniform 2px right padding aligns every value to one edge (matches item prices + SUMME + MOV row). */ #discount_wrapper, #sPledgeB, #sCostsB { display: flex; justify-content: space-between; gap: 8px; float: none; width: auto; margin: 0; font-size: 11px; color: var(--tee-ink-soft); background: none; border-radius: 0; padding: 4px 2px; } #sCostsB { font-size: 12px; } #fPrice { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #fff; border-top: 1px solid var(--tee-surface); margin: 10px 0 0; padding: 12px 2px 4px; } #fPrice #fPriceRight { color: var(--tee-accent); font-size: 15px; } .mov_value { display: flex; justify-content: flex-start; text-align: left; font-size: 12px; color: var(--tee-ink-soft); padding: 2px 2px 10px; } .mov_value a { color: var(--tee-accent); text-decoration: none; } /* MOV progress bar (tee: SidebarCart) — gold fill below MOV, green once reached. Structure server-rendered in #movGate; applyMovGate() drives width/color/remaining live. */ #movGate .mov-bar { padding: 0 2px 12px; } .mov-bar-head { display: flex; justify-content: flex-end; min-height: 12px; margin-bottom: 6px; } .mov-bar-rem { font-family: var(--tee-font-mono); font-size: 10px; font-weight: 700; color: var(--tee-accent); } .mov-bar-track { height: 6px; background: #0D0D0D; border: 1px solid #222; border-radius: 999px; overflow: hidden; } .mov-bar-fill { height: 100%; border-radius: 999px; background: var(--tee-accent); transition: width 500ms var(--tee-ease), background 300ms var(--tee-ease); } .mov-bar.is-reached .mov-bar-fill { background: #22C55E; } /* ---------- 11. Checkout form (tee JETZT BESTELLEN) ---------- */ #myCart .oBoxTitle { margin-top: 20px; } #orderForm .fBox > p, #orderForm .fBoxradio > p { font-family: var(--tee-font-mono); font-size: 12px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--tee-ink-soft); height: auto; /* neutralize legacy base.css:351 .fBox p{height:100%} — in the flex grid it let the label fill the stretched item and pushed following content out. */ margin-bottom: 5px; } #orderBox input[type="text"], #orderBox input[type="email"], #orderBox input[type="password"], #orderBox input[type="tel"], #orderBox input[type="number"], #orderBox select, #orderBox textarea { width: 100%; background: var(--tee-input-bg); border: 1px solid var(--tee-input-line); border-radius: var(--tee-r-s); color: #fff; font-family: var(--tee-font-mono); font-size: 12px; padding: 8px 10px; box-sizing: border-box; transition: border-color 200ms var(--tee-ease), box-shadow 200ms var(--tee-ease); } #orderBox input:focus, #orderBox select:focus, #orderBox textarea:focus { outline: none; border-color: var(--tee-accent); box-shadow: 0 0 0 3px var(--tee-accent-soft); } #orderBox ::placeholder { color: rgba(160, 160, 160, .4); } #orderForm .fBoxradio label { color: var(--tee-ink); font-size: 12px; margin-right: 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } #orderBox input[type="radio"], #orderBox input[type="checkbox"] { accent-color: var(--tee-accent); width: 16px; height: 16px; } #orderForm .fBox .last, #orderForm .last.textColor { color: var(--tee-ink-soft); font-size: 12px; font-family: var(--tee-font-body); } #orderForm .clearL { clear: both; } /* ===== WP6 — ONE regional legacy-geometry reset ===== base.css builds the order form as a float grid with fixed px (.LM 150 / .LL 231 / .LS 67 / .LT 285, .LT textarea min/max-width:289, .LM/.LL/.LS input px, .LXS .last width:269 float:right, #sendOrder margin:4px). tee used to override those piecemeal (per-field, per-button) → any newly added control re-leaked stale geometry. Neutralize ALL of it in ONE place so the tee flex-grid below is the SOLE geometry authority. Subsumes the former textarea-unlock (§11) + #sendOrder horizontal-margin (§12) patches. Scoped to #orderForm → cart.php coupon/totals stay untouched. */ #orderForm .fBox, #orderForm .fBoxradio, #orderForm .fBox > div, #orderForm .fBox .first, #orderForm .fBox .last, #orderForm input, #orderForm select, #orderForm textarea { box-sizing: border-box; float: none; min-width: 0; max-width: 100%; margin: 0; } /* button: same geometry reset, but its margin stays owned by §12 (deliberate CTA spacing) */ #orderForm button { box-sizing: border-box; float: none; min-width: 0; max-width: 100%; } /* controls + their wrappers fill the .fBox column; radios/checkboxes keep the fixed 16px from §11 */ #orderForm .fBox > div, #orderForm input:not([type="radio"]):not([type="checkbox"]), #orderForm select, #orderForm textarea { width: 100%; } /* responsive field grid: fill the tee sidebar column, keep the original proportions (LM=½, LL≈¾, LS≈¼, LT/LXS/radio=full) with a 10px column gap. Non-field children (hidden token input, clearfix, spacer, mov hint, submit) span full width. */ #orderForm { display: flex; flex-wrap: wrap; column-gap: 10px; align-items: flex-start; } #orderForm > *:not(.fBox):not(.fBoxradio) { flex: 0 0 100%; } #orderForm .fBox, #orderForm .fBoxradio { width: auto; margin-bottom: 12px; } /* unified rhythm (radio row was 8px) */ #orderForm .fBox.LM { flex: 0 1 calc(50% - 5px); } #orderForm .fBox.LL { flex: 0 1 calc(75% - 5px); } #orderForm .fBox.LS { flex: 0 1 calc(25% - 5px); } #orderForm .fBox.LT, #orderForm .fBox.LXS, #orderForm .fBoxradio { flex: 0 1 100%; } /* checkbox rows (AGB / newsletter): base.css floats .last (width:269px) away from the bare checkbox → detached label ending 23px short of the field edge. Make the row a flex line so the checkbox sits with its label and the label fills to the column edge. */ #orderForm .fBox.LXS { display: flex; align-items: flex-start; gap: 8px; } #orderForm .fBox.LXS .last { flex: 1; padding: 0; } /* MOV hint */ #movHint, .mov_hint { font-family: var(--tee-font-mono); font-size: 11px; color: var(--tee-accent); background: var(--tee-accent-soft); border-radius: var(--tee-r-s); padding: 8px 10px; text-align: center; } /* ---------- 12. Primary CTA (tee submit button) ---------- */ #sendOrder { width: 100%; /* deliberate CTA spacing: 12px above, zero horizontal. The shorthand also overrides the legacy base.css:361 margin:4px (all sides) — killing the old horizontal overflow at its source. */ margin: 12px 0 0; font-family: var(--tee-font-display); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tee-bg); background: linear-gradient(to right, var(--tee-accent), var(--tee-accent-2)); border: none; border-radius: var(--tee-r-m); padding: 17px 18px; cursor: pointer; box-shadow: 0 10px 15px -3px var(--tee-accent-soft); transition: transform 200ms var(--tee-ease), box-shadow 200ms var(--tee-ease), filter 200ms var(--tee-ease); } /* hover: brighten the gold (smooth — filter is in the transition), NO scale — a full-width button scaled 1.02 grows past its container's right edge (operator report). active: slight dim press. */ #sendOrder:hover { filter: brightness(1.08); } #sendOrder:active { filter: brightness(0.96); } /* coupon button (tee: ghost w/ gold border, fills gold on hover) */ #sendVoucher { width: 100%; font-family: var(--tee-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--tee-ink-warm); background: transparent; border: 1px solid rgba(212, 175, 55, .4); border-radius: var(--tee-r-s); padding: 9px 14px; cursor: pointer; transition: all 250ms var(--tee-ease); } #sendVoucher:hover { background: var(--tee-accent); border-color: var(--tee-accent); color: var(--tee-bg); } /* other rail buttons */ #sendOrderBox button[type="submit"]:not(#sendOrder):not(#sendVoucher), #sendOrderBox .cssbutton { font-family: var(--tee-font-mono); font-size: 11px; color: var(--tee-ink); background: var(--tee-surface-2); border: 1px solid var(--tee-line-2); border-radius: var(--tee-r-s); padding: 8px 12px; cursor: pointer; transition: all 200ms var(--tee-ease); } /* ---------- 13. Cookie banner ---------- */ #cookiedingsbums { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(18, 20, 20, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--tee-line); color: var(--tee-ink-soft); font-size: 12px; font-family: var(--tee-font-mono); padding: 12px 24px; } #cookiedingsbums a { color: var(--tee-accent); } #cookiedingsbumsCloser { cursor: pointer; font-family: inherit; /* beat jquery-ui .ui-widget{font-family:Arial} via id specificity */ color: var(--tee-ink-soft); background: var(--tee-surface); border: 1px solid var(--tee-line-2); border-radius: 6px; padding: 3px 8px; transition: all 200ms var(--tee-ease); } #cookiedingsbumsCloser:hover { color: #fff; background: var(--tee-surface-2); } /* legacy desktop.css cookie rules leaked geometry into this bar: width:100% + content-box made the fixed bar wider than the viewport, and #cookiedingsbumsCloser stayed position:absolute (right:5px) → the ✖ landed ~40px OFF-SCREEN right and the bar could not be dismissed. Reset to fit the viewport and let the closer be a normal flex item in the centered row (tee §13 already skins it). */ #cookiedingsbums { box-sizing: border-box; width: auto; } #cookiedingsbums div { padding: 0; } #cookiedingsbumsCloser { position: static; } /* ---------- 14. Footer ---------- */ #footer { background: var(--tee-footer); border-top: 1px solid var(--tee-surface); color: var(--tee-ink-soft); padding: 32px 24px; margin-top: 48px; border-radius: 0; } #footer a { color: var(--tee-ink-soft); background: none; font-size: 13px; text-decoration: none; transition: color 200ms var(--tee-ease); } #footer a:hover { color: var(--tee-accent); background: none; } /* ---------- 15. Legacy float resets ---------- */ .clear, .clearL { clear: both; } /* ---------- 16. Native now stays in the DOM, so we style it directly (appearance:none + dark input). The chevron is a wrapper ::after (mask + var(--tee-accent), data-theme-aware) because