.hwp-app{--hwp-blue:#175cd3;max-width:1020px;margin:24px auto;padding:24px;background:#f7f9fc;border-radius:20px;color:#152238;font-family:system-ui,-apple-system,Segoe UI,sans-serif;box-sizing:border-box}.hwp-app *{box-sizing:border-box}.hwp-top,.hwp-heading,.hwp-shift-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.hwp-top h1{font-size:25px;margin:0}.hwp-top p,.hwp-heading span,.hwp-swap p{color:#63748b;font-size:13px;margin:4px 0}.hwp-pill,.hwp-count{border-radius:100px;background:#e7efff;color:#175cd3;padding:6px 11px;font-size:12px;white-space:nowrap}.hwp-heading{margin:23px 0 12px}.hwp-heading h2,.hwp-swap h2{font-size:17px;margin:0}.hwp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}.hwp-shift,.hwp-swap{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px}.hwp-shift-head strong{font-size:16px}.hwp-shift-head small{display:block;color:#65758a;font-size:12px;margin-top:5px}.hwp-people{display:grid;gap:7px;margin:15px 0}.hwp-people span{font-size:13px;color:#24405b}.hwp-people .hwp-empty{color:#9aa8b8}.hwp-inline{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}.hwp-app .hwp-inline{display:flex}.hwp-inline button{border:0;border-radius:9px;padding:9px 13px;background:#175cd3;color:#fff;cursor:pointer;font-size:13px;font-weight:600}.hwp-app .hwp-shift .hwp-inline button{width:100%}.hwp-secondary button{background:#eaf0f7;color:#274363}.hwp-full{font-size:12px;color:#54705e;background:#eef8f0;border-radius:8px;padding:9px;text-align:center}.hwp-swap{margin-top:17px}.hwp-swap label{font-size:12px;display:grid;gap:5px;flex:1;min-width:170px}.hwp-swap select{width:100%;border:1px solid #d8e0ea;border-radius:8px;padding:9px;background:#fff}.hwp-swap form{margin-top:12px}.hwp-request{border-top:1px solid #e5eaf1;margin-top:15px;padding-top:12px}.hwp-request form{display:inline-flex;margin-right:8px}.hwp-admin-link{margin-top:16px}.hwp-notice{background:#e6f4ea;padding:10px;border-radius:8px;margin:12px 0}@media(max-width:600px){.hwp-app{padding:13px;margin:10px auto;border-radius:12px}.hwp-top h1{font-size:20px}.hwp-pill{max-width:130px;overflow:hidden;text-overflow:ellipsis}.hwp-list{grid-template-columns:1fr}}

.hwp-my-shifts{margin:18px 0;padding:16px;border:1px solid #dce4ed;border-radius:12px}.hwp-my-shifts h2{margin:0 0 12px}.hwp-my-shift{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid #e7edf3}.hwp-my-shift:last-child{border-bottom:0}.hwp-my-shift span{font-size:14px;color:#526174}

/* Tablet: zwei übersichtliche Spalten, ohne horizontales Scrollen. */
.hwp-site-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.hwp-site-tabs a{padding:8px 11px;border-radius:9px;background:#e9f0fa;font-size:13px}
.hwp-app input,.hwp-app select,.hwp-app button{max-width:100%}
.hwp-app .hwp-inline{min-width:0}
.hwp-app .hwp-inline input,.hwp-app .hwp-inline select{min-width:0}
.hwp-my-shifts{background:#fff}
@media(min-width:700px) and (max-width:1050px){
 .hwp-app{margin:8px auto;padding:17px}
 .hwp-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hwp-shift{padding:13px}
 .hwp-site-tabs{gap:6px}
}
@media(max-width:699px){
 .hwp-app{margin:0 auto;padding:12px;border-radius:12px}
 .hwp-top{align-items:flex-start;gap:8px}
 .hwp-top h1{font-size:19px;line-height:1.25}
 .hwp-top p{font-size:12px}
 .hwp-pill{font-size:11px;max-width:100px;white-space:normal;overflow-wrap:anywhere}
 .hwp-heading{margin:15px 0 9px}
 .hwp-heading h2,.hwp-swap h2,.hwp-my-shifts h2{font-size:16px}
 .hwp-heading span{font-size:11px;text-align:right}
 .hwp-list{grid-template-columns:minmax(0,1fr);gap:9px}
 .hwp-shift{padding:12px;border-radius:12px}
 .hwp-shift-head{align-items:flex-start}
 .hwp-shift-head strong{font-size:14px}
 .hwp-shift-head small{font-size:11px;line-height:1.5}
 .hwp-count{font-size:11px;padding:5px 8px}
 .hwp-people{margin:10px 0;gap:5px}
 .hwp-people span{font-size:12px}
 .hwp-app .hwp-inline button{min-height:44px}
 .hwp-swap,.hwp-my-shifts{padding:12px;margin-top:12px}
 .hwp-swap label{min-width:0;width:100%}
 .hwp-swap select{min-height:44px}
 .hwp-swap .hwp-inline{flex-direction:column;align-items:stretch}
 .hwp-swap .hwp-inline button{width:100%;min-height:44px}
 .hwp-my-shift{gap:3px}
 .hwp-my-shift strong{font-size:13px}
 .hwp-my-shift span{font-size:12px}
}