/* Händlerportal · Startseite. Ladereihenfolge: templates/b2b_portal/_styles.html */
/* Home */
.hello{display:grid;gap:8px;margin-bottom:26px}
.tiles{display:grid;gap:14px}
.tile{--tc:var(--tile1);position:relative;overflow:hidden;border-radius:14px;background:var(--tc);color:var(--on-tile);min-height:280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);isolation:isolate}
.tile{cursor:pointer;transition:box-shadow .2s ease}
.tile:hover{box-shadow:0 0 0 2px var(--accent)}
.tile.sleep{--tc:var(--tile2)}
.tile.eat{--tc:var(--tile3);color:var(--on-tile3)}
.tile.wear{--tc:var(--tile4);color:var(--on-tile4)}
.tile.wear .photo img{object-position:100% 35%}
.tile .new{display:inline-block;vertical-align:top;margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111111;padding:3px 9px;border-radius:999px;position:relative;top:8px}
.tile .photo{position:absolute;top:0;bottom:0;right:0;width:70%;z-index:-1;overflow:hidden}
.tile .photo img{width:100%;height:100%;object-fit:cover;display:block}
.tile .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 85%,transparent) 9%,color-mix(in srgb,var(--tc) 45%,transparent) 21%,color-mix(in srgb,var(--tc) 12%,transparent) 31%,color-mix(in srgb,var(--tc) 0%,transparent) 40%)}
.tile .txt{padding:26px 28px 24px;display:grid;gap:14px;align-content:space-between}
.tile .open{display:grid;gap:6px;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.tile .word{font-size:clamp(44px,5.4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
.tile .meta{font-size:13.5px;opacity:.85;max-width:34ch}
.tile ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-width:280px}
.tile li button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);padding:6px 0;color:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.tile li button span{opacity:.6;font-size:12px}
.tile li button:hover{border-bottom-color:currentColor}
.tile{--tf:var(--on-tile)}
.tile.eat{--tf:var(--on-tile3)}
.tile.wear{--tf:var(--on-tile4)}
.tile .acts{display:flex;flex-wrap:wrap;gap:8px}
.tbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;border:1px solid var(--tf);background:color-mix(in srgb,var(--tc) 60%,transparent);color:var(--tf);cursor:pointer;white-space:nowrap}
.tbtn svg{width:17px;height:17px}
.tbtn:hover{background:color-mix(in srgb,var(--tf) 12%,var(--tc))}
.tbtn.fill{background:var(--tf);color:var(--tc)}
.tbtn.fill:hover{filter:brightness(.94);background:var(--tf)}
@media (max-width:760px){
  .tile{grid-template-columns:1fr}
  .tile .txt{padding:22px 20px 20px}
  .tile ul{max-width:230px}
  .tile .photo{width:64%}
  .tile .photo::after{background:linear-gradient(90deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 88%,transparent) 20%,color-mix(in srgb,var(--tc) 40%,transparent) 38%,color-mix(in srgb,var(--tc) 0%,transparent) 54%)}
}
@media (max-width:420px){
  .tile{min-height:0}
  .tile ul{max-width:none}
  .tile .photo{position:relative;inset:auto;width:auto;height:180px;order:-1;z-index:0}
  .tile .photo::after{background:linear-gradient(0deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 0%,transparent) 55%)}
  .tile .txt{padding-top:6px}
}
.second{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:720px){.second{grid-template-columns:1fr}}
/* Startseiten-Varianten (Test) */
.laysw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:10px;font-size:12.5px;color:var(--muted)}
.laysw span{margin-right:4px}
.laysw button{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.laysw button[aria-current="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ctile{--tf:var(--on-tile);--tc:var(--tile1);background:var(--tc);color:var(--on-tile);border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;cursor:pointer;transition:box-shadow .2s}
.ctile:hover{box-shadow:0 0 0 2px var(--accent)}
.ctile.sleep{--tc:var(--tile2)}.ctile.eat{--tc:var(--tile3);--tf:var(--on-tile3);color:var(--on-tile3)}.ctile.wear{--tc:var(--tile4);--tf:var(--on-tile4);color:var(--on-tile4)}
.ctile .cph{position:relative;aspect-ratio:16/10;overflow:hidden}
.ctile .cph img{width:100%;height:100%;object-fit:cover;display:block}
.ctile.wear .cph img{object-position:100% 35%}
.ctile .cph .new{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111;padding:3px 8px;border-radius:999px}
.ctile .cbd{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.ctile .cw{background:none;border:0;padding:0;color:inherit;font:inherit;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05;text-align:left;cursor:pointer}
.ctile .cm{font-size:13px;opacity:.85}
.ctile .cs{font-size:12px;opacity:.85;line-height:1.5;display:flex;flex-wrap:wrap;gap:3px 12px}
.ctile .cs button{text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.ctile .cs span{margin:0 5px;opacity:.6}
.ctile .ca{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ctile .tbtn{font-size:12.5px;padding:6px 11px}
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stile{--tc:var(--tile1);--tf:var(--on-tile);display:grid;grid-template-rows:auto 1fr;border-radius:14px;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;background:var(--tc);color:var(--tf);transition:box-shadow .2s}
.stile.sleep{--tc:var(--tile2)}.stile.eat{--tc:var(--tile3);--tf:var(--on-tile3)}.stile.wear{--tc:var(--tile4);--tf:var(--on-tile4)}
.stile:hover{box-shadow:0 0 0 2px var(--accent)}
.stile .si{display:block;aspect-ratio:16/10;overflow:hidden;background:#EEE}
.stile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.stile:hover img{transform:scale(1.03)}
.stile.walk img{object-position:30% 85%}.stile.sleep img{object-position:50% 60%}.stile.eat img{object-position:50% 70%}.stile.wear img{object-position:40% 70%}
.stile .sb{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 14px 12px;min-height:64px}
.stile .sw{display:grid;gap:1px;min-width:0}
.stile .sw b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stile .sw i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111;padding:2px 7px;border-radius:999px;vertical-align:middle;position:relative;top:-3px;margin-left:4px}
.stile .sw small{font-size:12.5px;opacity:.85;line-height:1.35}
.stile .sa{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 35%,transparent);display:grid;place-items:center;transition:background .15s,color .15s}
.stile:hover .sa{background:var(--tf);color:var(--tc)}

.ctile{position:relative}
.ctile .cbd{padding-right:52px}
.ctile .cgo{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:background .15s,color .15s}
.ctile .cgo svg{width:16px;height:16px}
.ctile:hover .cgo{background:var(--tf);color:var(--tc)}
.ctile:focus-visible,.dcard.dlink:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dcard.dlink{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dcard.dlink:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}