.profile-header-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.profile-title { margin: 0; display: flex; align-items: center; gap: 0.75rem; }
.rank-badge { background: var(--c-gold); color: #fff; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 2px; font-weight: bold; text-transform: uppercase; }
.grid-profile { 
    display: grid; 
    grid-template-columns: 320px 1fr 320px; 
    gap: 1.5rem; 
    align-items: start; 
}
.card-primary { background: var(--c-marine); color: var(--c-beige-bg); border: none; }
.card-primary .card-header-line { border-bottom: 1px solid rgba(255,255,255,0.1); }

.timeline-wrapper { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.timeline-line { position: absolute; left: 18px; top: 10px; bottom: 10px; width: 2px; background: var(--c-beige-light); z-index: 1; }
.timeline-event { display: flex; gap: 1rem; position: relative; z-index: 2; }
.timeline-icon { width: 38px; height: 38px; background: var(--c-beige-bg); border: 2px solid var(--c-beige-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.timeline-content { background: var(--c-beige-bg); border: 1px solid var(--c-beige-light); padding: 1rem; border-radius: var(--radius-sm); flex-grow: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.timeline-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--c-blue-grey); }
.timeline-box-clickable { font-size: 0.8rem; background: #f8f9fa; padding: 0.75rem; border: 1px solid var(--c-marine); border-left: 3px solid var(--c-marine); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
.timeline-box-clickable:hover { background: #eef2f5; }

.btn-quick-action { width: 100%; margin-bottom: 0.5rem; justify-content: flex-start; }

.order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; line-height: 1.5; }
.address-box { background: var(--c-beige-bg); padding: 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--c-beige-light); }
.address-box-content { font-family: monospace; line-height: 1.4; }
.item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.item-list-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed var(--c-beige-light); padding-bottom: 0.5rem; }
.badge-retour { color: white; background: var(--c-danger); padding: 0.1rem 0.3rem; border-radius: 2px; font-size: 0.7rem; font-weight: bold; margin-left: 0.5rem; }
.tracking-box { background: #e3f2fd; padding: 0.5rem; border-radius: var(--radius-sm); border-left: 3px solid #0056b3; }
.tracking-link { color: #0056b3; text-decoration: underline; margin-left: 0.5rem; }

.return-item-box { background: var(--c-beige-bg); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--c-beige-light); display: flex; flex-direction: column; gap: 0.75rem; }
.return-item-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }

/* ==========================================================================
   MOBILE WEICHE: KUNDENAKTE
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Die Magie: Das 3-Spalten-Grid wird zur 1-Spalte! */
    .grid-profile {
        grid-template-columns: 1fr;
    }
    
    /* Verhindert, dass Elemente innerhalb der Spalten ausbrechen */
    .grid-profile > div {
        min-width: 0;
    }

    /* 2. Header-Bereich sauber stapeln */
    .profile-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }

    /* 3. Interne Grids (z.B. Adress-Boxen) entspannen */
    .order-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* 4. Item-Listen sicher umbrechen lassen */
    .item-list-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .badge-retour { margin-left: 0; margin-top: 5px; }
    
    /* 5. Lange URLs und IDs hart umbrechen */
    .address-box-content, .tracking-box, .timeline-content {
        overflow-wrap: break-word; 
        word-wrap: break-word; 
    }
}