/* Boxora · Kundenportal */
.login-wrap { padding: clamp(36px, 6vw, 88px) 0; }
.login-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .login-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.login-grid > * { min-width: 0; }
.login-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-2); padding: clamp(22px, 3.4vw, 40px); display: grid; gap: 18px; }
html[data-look="premium"] .login-card { border: 1px solid var(--line); }
.login-card .input[readonly] { background: var(--surface-2); }
.login-feats { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
.login-feats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.login-feats .fi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
html[data-look="premium"] .login-feats .fi { color: var(--accent); }
.login-feats b { display: block; }
.login-feats span { color: var(--ink-2); font-size: .95rem; }

.pt { padding: clamp(16px, 2.4vw, 32px) 0 clamp(48px, 6vw, 80px); }
.pt-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .pt-grid { grid-template-columns: 260px minmax(0, 1fr); } }
.pt-grid > * { min-width: 0; }
.pt-side { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px; display: grid; gap: 14px; }
html[data-look="premium"] .pt-side { border: 1px solid var(--line); box-shadow: none; }
@media (min-width: 1000px) { .pt-side { position: sticky; top: calc(var(--top-h, 110px) + 16px); } }
.pt-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); }
.pt-ava { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 1rem/1 var(--f-display); }
.pt-who b { display: block; font-size: .96rem; line-height: 1.25; }
.pt-who .pt-ava { color: var(--on-accent); font-size: 1rem; }
.pt-who span { font-size: .82rem; color: var(--ink-2); }
.pt-nav { display: grid; gap: 4px; }
.pt-nav button { appearance: none; border: 0; background: transparent; color: var(--ink-2); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; font: 600 .94rem/1.2 var(--f-text); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.pt-nav button:hover { background: var(--surface-2); color: var(--ink); }
.pt-nav button[aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }
html[data-look="premium"] .pt-nav button[aria-selected="true"] { color: var(--accent); }
.pt-nav .cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .74rem; display: grid; place-items: center; }
.pt-nav .cnt[data-n="0"] { display: none; }
.pt-logout { justify-self: start; }
@media (max-width: 999px) {
  .pt-side { padding: 12px; }
  .pt-who { border-bottom: 0; padding-bottom: 4px; }
  .pt-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pt-nav button { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; font-size: .86rem; background: var(--surface-2); }
  .pt-nav .cnt { min-width: 20px; height: 20px; font-size: .7rem; padding: 0 5px; }
  .pt-logout { display: none; }
}
@media (min-width: 820px) and (max-width: 999px) { .pt-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pt-sel { display: none; }
@media (max-width: 559px) { .pt-nav { display: none; } .pt-sel { display: grid; gap: 6px; } .pt-sel label { font-size: .84rem; font-weight: 600; color: var(--ink-2); } }

.pt-panel[hidden] { display: none; }
.pt-panel { display: grid; gap: clamp(16px, 2vw, 22px); animation: page-in .45s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .pt-panel { animation: none; } }
.pt-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; }
.pt-h h1, .pt-h h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
html[data-look="bunt"] .pt-h h1, html[data-look="bunt"] .pt-h h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }
.pt-h p { margin: 6px 0 0; color: var(--ink-2); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { appearance: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-1); padding: 16px 18px; display: grid; gap: 4px; transition: transform .3s var(--ease-out), box-shadow .3s; min-width: 0; }
html[data-look="premium"] .kpi { border: 1px solid var(--line); box-shadow: none; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.kpi b { font-family: var(--f-display); font-size: 2rem; letter-spacing: -0.03em; line-height: 1.05; }
.kpi span { color: var(--ink-2); font-size: .9rem; }
.todo { display: grid; gap: 10px; }
.todo-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--sh-1); }
html[data-look="premium"] .todo-item { border: 1px solid var(--line); box-shadow: none; }
.todo-item .ti { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); }
.todo-item b { display: block; }
.todo-item span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 560px) { .todo-item { grid-template-columns: 40px minmax(0, 1fr); } .todo-item .ti { width: 40px; height: 40px; } .todo-item .btn { grid-column: 1 / -1; justify-self: start; } }
.box { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
html[data-look="premium"] .box { border: 1px solid var(--line); box-shadow: none; }
.box h3 { margin-bottom: 12px; }
.rows { display: grid; }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 0; }
.rows b { display: block; }
.rows span.s { color: var(--ink-2); font-size: .9rem; }
.thumb { width: 64px; height: 56px; border-radius: 12px; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; flex: none; }
.thumb img, .thumb svg { width: 100%; height: 100%; object-fit: contain; }
.with-thumb { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
@media (max-width: 560px) { .with-thumb { grid-template-columns: 56px minmax(0, 1fr); } .with-thumb > :last-child { grid-column: 1 / -1; justify-self: start; } .thumb { width: 56px; height: 48px; } }

/* Angebot */
.offer-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 760px) { .offer-head { grid-template-columns: 200px minmax(0, 1fr); align-items: center; } }
.offer-img { aspect-ratio: 1 / .88; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.offer-img img, .offer-img svg { width: 92%; height: 92%; object-fit: contain; }
.offer-img .thumb { width: 100%; height: 100%; background: none; border-radius: 0; }
.tiers { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { position: relative; display: grid; gap: 4px; padding: 18px; border-radius: var(--r-sm); border: 2px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s; min-width: 0; }
.tier:hover { transform: translateY(-3px); }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tier:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tier .q { font-weight: 650; }
.tier .pp { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1.1; }
html[data-look="bunt"] .tier .pp { font-size: 1.35rem; }
.tier .tt { color: var(--ink-2); font-size: .9rem; }
.tier .save { position: absolute; top: 10px; right: 10px; }
.conds { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .conds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.conds > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.conds .i { color: var(--accent-text); margin-top: 2px; }
html[data-look="premium"] .conds .i { color: var(--accent); }
.accepted { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--r-sm); background: var(--ok-soft); }
.accepted .i { width: 32px; height: 32px; color: var(--ok); }

/* Druckfreigabe */
.proof-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .proof-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.proof-grid > * { min-width: 0; }
.proof-sheet { position: relative; background: #FFFFFF; border-radius: var(--r-sm); box-shadow: var(--sh-1); padding: 14px; }
html[data-look="premium"] .proof-sheet { background: #F4F1EA; }
.proof-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .78rem; color: #4A4238; padding: 0 4px 10px; border-bottom: 1px dashed #CFC6B8; margin-bottom: 10px; }
.proof-meta b { color: #1C1814; }
.proof-canvas { position: relative; cursor: crosshair; }
.proof-canvas canvas { display: block; width: 100%; height: auto; }
.pin { position: absolute; transform: translate(-50%, -100%); width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.pin span { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.pin.mine span { background: #1F3A68; }
.pin b { position: relative; color: #fff; font: 700 .8rem/30px var(--f-text); display: block; text-align: center; }
html[data-look="premium"] .pin:not(.mine) b, html[data-look="bunt"] .pin:not(.mine) b { color: #1A1A1F; }
.pin.on span { outline: 3px solid #fff; }
.pin-new { animation: pin-drop .45s var(--ease-out); }
@keyframes pin-drop { from { transform: translate(-50%, -160%); opacity: 0; } }
.comments { display: grid; gap: 10px; }
.cmt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.cmt .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .8rem; }
.cmt.mine .n { background: #1F3A68; color: #fff; }
.cmt b { font-size: .86rem; }
.cmt p { margin: 2px 0 0; font-size: .93rem; }
.cmt-form { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-sm); border: 2px dashed var(--line-2); }
.proof-3d { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.proof-3d .thumb { width: 96px; height: 84px; }
.status-big { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Lieferung */
.route { position: relative; }
.route svg { width: 100%; height: auto; display: block; }
.route .r-line { stroke: var(--line-2); stroke-width: 3; fill: none; stroke-dasharray: 2 9; stroke-linecap: round; }
.route .r-done { stroke: var(--accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.route .r-node { fill: var(--surface); stroke: var(--line-2); stroke-width: 3; }
.route .r-node.done { fill: var(--accent); stroke: var(--accent); }
.route text { font: 600 13px var(--f-text); fill: var(--ink-2); }
.route .r-ship { color: var(--ink); }
.track { list-style: none; display: grid; gap: 0; }
.track li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.track li:last-child { border-bottom: 0; }
.track .st { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.track li.done .st { background: var(--ok-soft); color: var(--ok); }
.track li.now .st { background: var(--accent); color: var(--on-accent); }
.track b { display: block; }
.track span { color: var(--ink-2); font-size: .9rem; }
.track time { font-size: .86rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 480px) { .track li { grid-template-columns: 34px minmax(0, 1fr); } .track time { grid-column: 2; } }

/* Dokumente + Meldungen */
.docs .rows > div { grid-template-columns: 40px minmax(0, 1fr) auto; }
.doc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
@media (max-width: 560px) { .docs .rows > div { grid-template-columns: 40px minmax(0, 1fr); } .docs .rows .btn { grid-column: 2; justify-self: start; } }
.msg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.msg:last-child { border-bottom: 0; }
.msg .u { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.msg.read .u { background: transparent; }
.msg time { font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 480px) { .msg { grid-template-columns: 12px minmax(0, 1fr); } .msg time { grid-column: 2; } }