/* Teeatelier: eigenständiger, lokal arbeitender Produktberater. */
#tee { scroll-margin-top:96px; --tea-accent:#56705a; --tea-soft:#e9eee4; }
[data-theme="dark"] #tee { --tea-accent:#a6c29e; --tea-soft:#283228; }
.tea-section { background:var(--bg-2); border-block:1px solid var(--line); }
.tea-intro { display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:center; margin-bottom:34px; }
.tea-intro h2 { font-size:clamp(2rem,4vw,3.1rem); }
.tea-intro h2 em { color:var(--tea-accent); font-weight:400; }
.tea-intro p { color:var(--muted); margin-top:18px; max-width:680px; }
.tea-intro .eyebrow { color:var(--tea-accent); }
.tea-intro-art { position:relative; min-height:245px; display:grid; place-items:center; background:var(--tea-soft); border:1px solid var(--line); border-radius:48% 48% 16px 16px; }
.tea-intro-art svg { width:170px; height:170px; color:var(--tea-accent); }
.tea-intro-art span { position:absolute; bottom:20px; letter-spacing:.15em; text-transform:uppercase; font-size:.68rem; font-weight:700; color:var(--tea-accent); }
.tea-steps { display:flex; flex-wrap:wrap; gap:12px 28px; margin:22px 0 28px; padding:18px 0; border-block:1px solid var(--line); color:var(--muted); font-size:.87rem; }
.tea-steps b { color:var(--tea-accent); margin-right:8px; }
.tea-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
.tea-main { min-width:0; }
.tea-toolbar { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.tea-category-field { border:0; padding:0; margin:0; min-width:0; }
.tea-category-field legend { font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--heading); margin-bottom:18px; }
.tea-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tea-category { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; min-width:0; padding:18px 8px 15px; border:1px solid transparent; border-radius:18px; background:color-mix(in srgb,var(--surface) 65%,transparent); color:var(--ink); font:600 .79rem var(--sans); line-height:1.4; text-align:center; cursor:pointer; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.tea-category-visual { display:grid; place-items:center; width:78px; height:78px; background:#fff; border-radius:50%; overflow:hidden; box-shadow:0 3px 14px rgba(50,45,30,.06); margin-bottom:5px; }
.tea-category-visual img { width:100%; height:100%; object-fit:contain; padding:7px; transition:transform .25s; }
.tea-category:hover { background:var(--surface); transform:translateY(-3px); box-shadow:0 9px 24px var(--shadow); }
.tea-category:hover img { transform:scale(1.08); }
.tea-category[aria-pressed="true"] { background:var(--tea-soft); border-color:var(--tea-accent); }
.tea-category-label { display:flex; align-items:center; justify-content:center; min-height:2.8em; color:var(--heading); }
.tea-category-count { font-size:.68rem; color:var(--muted); font-weight:400; }
.tea-category-check { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:var(--bg); background:var(--tea-accent); font-size:.7rem; opacity:0; }
.tea-category[aria-pressed="true"] .tea-category-check { opacity:1; }
.tea-category:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
@media(max-width:1050px) and (min-width:761px) { .tea-categories { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { .tea-categories { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .tea-category { padding:14px 5px 12px; font-size:.72rem; border-radius:14px; } .tea-category-visual { width:64px; height:64px; } .tea-category-check { top:6px;right:6px; } }
@media(max-width:350px) { .tea-categories { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .tea-category,.tea-category img { transition:none; } .tea-category:hover { transform:none; } }
.tea-field { min-width:0; }
.tea-field label { display:block; font-size:.83rem; font-weight:700; margin-bottom:6px; color:var(--heading); }
.tea-field input,.tea-field select,.tea-product select,.tea-product input { width:100%; min-height:46px; padding:10px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.9rem; }
.tea-check { display:flex; align-items:center; gap:8px; min-height:44px; font-size:.84rem; color:var(--ink); }
.tea-check input { accent-color:var(--tea-accent); width:18px; height:18px; }
.tea-help { padding:16px 18px; background:var(--tea-soft); border-radius:10px; margin:8px 0 18px; color:var(--ink); font-size:.87rem; line-height:1.7; }
.tea-help b { color:var(--heading); }
.tea-results-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:18px 0; }
.tea-results-head p { font-size:.83rem; color:var(--muted); }
.tea-btn { min-height:44px; padding:10px 15px; background:var(--surface); color:var(--tea-accent); border:1px solid var(--line); border-radius:9px; cursor:pointer; font:600 .85rem var(--sans); text-align:center; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:6px; }
.tea-btn:hover { border-color:var(--tea-accent); }
.tea-btn:disabled { opacity:.5; cursor:not-allowed; }
.tea-btn--primary { background:var(--tea-accent); border-color:var(--tea-accent); color:#fff; }
[data-theme="dark"] .tea-btn--primary { color:#1c1614; }
.tea-btn:focus-visible,#tee input:focus-visible,#tee select:focus-visible,.tea-dialog button:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
.tea-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tea-product { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:23px; display:flex; flex-direction:column; align-items:stretch; }
.tea-photo { margin:0 0 18px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tea-photo img { width:100%; height:210px; object-fit:contain; padding:12px; background:#fff; }
.tea-photo figcaption { padding:8px 10px; font-size:.65rem; line-height:1.5; color:#625b52; background:#f6f3ed; }
.tea-photo figcaption.tea-photo-ai { color:#603c20; background:#f4e7d6; font-weight:600; }
.tea-photo--detail img { height:260px; }
.tea-product-kind { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tea-accent); font-weight:700; margin-bottom:9px; }
.tea-product h3 { font-size:1.23rem; line-height:1.3; margin-bottom:6px; overflow-wrap:anywhere; }
.tea-id { color:var(--muted); font-size:.73rem; }
.tea-product-description { font-size:.85rem; color:var(--muted); margin:13px 0; line-height:1.7; }
.tea-product .tea-info { align-self:flex-start; margin:0 0 18px; background:none; padding:0; border:0; text-decoration:underline; text-underline-offset:4px; }
.tea-choice { display:grid; grid-template-columns:minmax(0,1fr) 70px; gap:10px; margin-top:auto; }
.tea-choice label { font-size:.75rem; font-weight:600; display:block; margin-bottom:5px; color:var(--ink); }
.tea-price { margin:14px 0; color:var(--heading); font-weight:700; font-size:1.1rem; }
.tea-price small { display:block; font-size:.72rem; color:var(--muted); font-weight:400; margin-top:2px; }
.tea-variant-note { font-size:.76rem; color:var(--berry); margin-bottom:12px; }
.tea-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; }
.tea-pagination span { font-size:.82rem; color:var(--muted); }
.tea-cart { position:sticky; top:96px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:23px; min-width:0; }
.tea-cart h3 { font-size:1.4rem; margin-bottom:8px; }
.tea-cart-intro,.tea-empty { color:var(--muted); font-size:.85rem; line-height:1.7; }
.tea-cart-items { list-style:none; padding:0; margin:16px 0; max-height:42vh; overflow-y:auto; overscroll-behavior:contain; }
.tea-cart-item { border-bottom:1px solid var(--line); padding:14px 0; }
.tea-cart-item b { display:block; font-size:.87rem; color:var(--heading); overflow-wrap:anywhere; }
.tea-cart-item p { color:var(--muted); font-size:.76rem; }
.tea-cart-row { display:flex; justify-content:space-between; align-items:center; gap:5px; margin-top:8px; }
.tea-cart-row button { min-width:44px; min-height:44px; padding:5px; }
.tea-cart-row strong { font-size:.87rem; }
.tea-cart-qty { display:flex; align-items:center; gap:7px; font-size:.8rem; }
.tea-remove { color:var(--muted); font-size:.73rem; border:0; background:transparent; cursor:pointer; min-height:44px; text-decoration:underline; }
.tea-total { padding-top:17px; border-top:1px solid var(--line); }
.tea-total div { display:flex; justify-content:space-between; gap:12px; color:var(--heading); font-weight:700; }
.tea-total p,.tea-notice { font-size:.75rem; color:var(--muted); margin:8px 0 15px; line-height:1.65; }
.tea-actions { display:grid; gap:8px; }
.tea-status { color:var(--tea-accent); font-size:.83rem; min-height:1.6em; margin:16px 0; }
.tea-footnote { color:var(--muted); font-size:.78rem; line-height:1.8; margin-top:30px; }
.tea-no-results { grid-column:1/-1; color:var(--muted); padding:30px 0; }
.tea-dialog { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:30px; width:min(620px,calc(100% - 28px)); max-height:85dvh; margin:auto; overflow:auto; box-shadow:0 25px 90px rgba(0,0,0,.3); }
.tea-dialog::backdrop { background:rgba(20,15,12,.7); backdrop-filter:blur(5px); }
.tea-dialog h3 { font-size:1.7rem; margin:16px 0; }
.tea-dialog p { margin:12px 0; font-size:.92rem; }
.tea-dialog .tea-dialog-close { display:flex; margin-left:auto; }
.tea-dialog table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.85rem; }
.tea-dialog th,.tea-dialog td { text-align:left; padding:10px 4px; border-bottom:1px solid var(--line); }
.tea-dialog small { display:block; color:var(--muted); font-size:.78rem; line-height:1.7; }
@media(max-width:1050px) { .tea-layout { grid-template-columns:minmax(0,1fr) 285px; gap:20px; } .tea-products { grid-template-columns:1fr; } }
@media(max-width:760px) { .tea-intro { grid-template-columns:1fr; gap:25px; } .tea-intro-art { display:none; } .tea-layout { grid-template-columns:1fr; } .tea-cart { position:static; } .tea-cart-items { max-height:none; } .tea-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .tea-products { grid-template-columns:1fr; } .tea-toolbar { grid-template-columns:1fr; } .tea-product,.tea-cart { padding:21px; } .tea-pagination { flex-wrap:wrap; } .tea-dialog { padding:21px; } }
/* Sidebar-Variante: links Kategorien, Mitte Produkte, rechts Merkliste. */
#tee > .wrap { max-width:1440px; }
.tea-layout { grid-template-columns:230px minmax(0,1fr) 290px; gap:24px; }
.tea-sidebar { position:sticky; top:96px; padding:20px 12px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 65%,transparent); min-width:0; }
.tea-sidebar-head { position:sticky; top:-20px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:-20px -12px 12px; padding:18px 16px 14px; background:var(--surface); border-bottom:1px solid var(--line); border-radius:18px 18px 0 0; }
.tea-sidebar-head h3 { font-size:1.13rem; line-height:1.3; }
.tea-sidebar-reset { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; color:var(--tea-accent); background:var(--bg); font:600 .75rem var(--sans); cursor:pointer; }
.tea-sidebar-reset:hover { border-color:var(--tea-accent); }
.tea-sidebar-reset:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
@media(min-width:761px) { .tea-sidebar { max-height:calc(100dvh - 116px); overflow-y:auto; scrollbar-width:thin; } }
@media(max-width:760px) { .tea-sidebar-head { position:static; margin-top:-18px; } }
.tea-sidebar .tea-categories { display:flex; flex-direction:column; gap:5px; }
.tea-sidebar .tea-category { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; column-gap:11px; row-gap:2px; align-items:center; padding:9px 20px 9px 9px; border-radius:11px; background:transparent; text-align:left; min-height:64px; }
.tea-sidebar .tea-category:hover { transform:none; box-shadow:none; background:var(--surface); }
.tea-sidebar .tea-category[aria-pressed="true"] { background:var(--tea-soft); }
.tea-sidebar .tea-category-visual { grid-row:1 / 3; width:42px; height:42px; margin:0; }
.tea-sidebar .tea-category-visual img { padding:3px; }
.tea-sidebar .tea-category-label { justify-content:flex-start; min-height:0; font-size:.78rem; }
.tea-sidebar .tea-category-count { font-size:.66rem; }
.tea-sidebar .tea-category-check { width:14px; height:14px; font-size:.55rem; right:4px; top:8px; }
.tea-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:1101px) { .tea-sidebar { max-height:calc(100dvh - 116px); overflow-y:auto; scrollbar-width:thin; } }
@media(max-width:1250px) and (min-width:1101px) { .tea-layout { grid-template-columns:210px minmax(0,1fr) 260px; gap:18px; } .tea-product,.tea-cart { padding:18px; } }
@media(max-width:1100px) and (min-width:761px) { .tea-layout { grid-template-columns:220px minmax(0,1fr); } .tea-sidebar { grid-row:1 / 3; } .tea-cart { grid-column:2; position:static; } .tea-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) and (min-width:761px) { .tea-products { grid-template-columns:1fr; } }
@media(max-width:760px) { .tea-layout { grid-template-columns:minmax(0,1fr); } .tea-sidebar { position:static; padding:18px 12px; } .tea-sidebar .tea-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .tea-sidebar .tea-category { padding-right:17px; column-gap:7px; grid-template-columns:34px minmax(0,1fr); } .tea-sidebar .tea-category-visual { width:34px;height:34px; } .tea-sidebar .tea-category-label { font-size:.72rem; } .tea-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .tea-products { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { #tee * { scroll-behavior:auto; } }