:root {
    --ha-black:      #041829;
    --ha-dark:       #091c2e;
    --ha-blue:       #0F69B4;
    --ha-yellow:     #FEED35;
    --ha-white:      #ffffff;
    --ha-gray-dark:  #0a2236;
    --ha-gray-mid:   #0d2d45;
    --ha-gray-light: #f5f5f5;
    --ha-border:     #1a3a55;
    --ha-success:    #28a745;
    --ha-error:      #dc3232;
    --ha-radius:     0px;
    --ha-font-head:  "Russo One", sans-serif;
    --ha-font-body:  "Roboto Condensed", sans-serif;
}

/* ================================
   Schriften
   ================================ */
.ha-auction-wrap,
.ha-auction-wrap *,
.ha-table-wrap,
.ha-table-wrap * {
    font-family: var(--ha-font-body) !important;
}

.ha-current-bid,
.ha-table-th,
.ha-submit-btn,
.ha-table-btn,
.ha-countdown,
.ha-table-bid {
    font-family: var(--ha-font-head) !important;
}

/* ================================
   Wrapper
   ================================ */
.ha-auction-wrap {
    background:    var(--ha-dark);
    color:         var(--ha-white);
    border-radius: var(--ha-radius);
    padding:       2rem;
    max-width:     640px;
}

/* ================================
   Gebotsinfos
   ================================ */
.ha-bid-info {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            var(--ha-border);
    border:                1px solid var(--ha-border);
    border-radius:         var(--ha-radius);
    overflow:              hidden;
    margin-bottom:         1.5rem;
}

.ha-bid-info-item {
    background:     var(--ha-gray-dark);
    padding:        1rem 1.25rem;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.ha-label {
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          #999;
    font-weight:    600;
}

.ha-current-bid {
    font-size:   1.75rem;
    font-weight: 400;
    color:       var(--ha-yellow);
    line-height: 1;
}

.ha-bid-count {
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--ha-white);
    line-height: 1;
}

.ha-auction-end {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    line-height:    1;
}

.ha-auction-date {
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--ha-white);
    line-height: 1;
}

.ha-auction-time {
    font-size:   0.85rem;
    font-weight: 400;
    color:       #aaa;
    line-height: 1;
    white-space: nowrap;
}

/* ================================
   Countdown
   ================================ */
.ha-countdown-wrap {
    background:    var(--ha-gray-mid);
    border:        1px solid var(--ha-border);
    border-radius: var(--ha-radius);
    padding:       1rem 1.25rem;
    margin-bottom: 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
}

.ha-countdown-wrap .ha-label {
    white-space: nowrap;
}

.ha-countdown {
    font-size:      1.25rem;
    font-weight:    400;
    color:          var(--ha-yellow);
    letter-spacing: 0.04em;
    display:        flex;
    align-items:    center;
    gap:            4px;
    flex-wrap:      wrap;
}

.ha-countdown-days,
.ha-countdown-hours,
.ha-countdown-minutes,
.ha-countdown-seconds {
    background:    var(--ha-black);
    padding:       2px 6px;
    border-radius: 2px;
    min-width:     2ch;
    text-align:    center;
    display:       inline-block;
}

/* ================================
   Auktion geschlossen
   ================================ */
.ha-closed-notice {
    background:    var(--ha-gray-mid);
    border:        1px solid var(--ha-border);
    border-left:   4px solid var(--ha-error);
    border-radius: var(--ha-radius);
    padding:       1rem 1.25rem;
    font-weight:   600;
    color:         var(--ha-white);
    font-size:     1rem;
}

/* ================================
   Formular
   ================================ */
.ha-form-wrap {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.ha-message {
    padding:       0.85rem 1rem;
    border-radius: var(--ha-radius);
    font-weight:   600;
    font-size:     0.95rem;
    display:       none;
}

.ha-message.ha-success {
    background: rgba(40, 167, 69, 0.15);
    border:     1px solid var(--ha-success);
    color:      var(--ha-success);
}

.ha-message.ha-error {
    background: rgba(220, 50, 50, 0.15);
    border:     1px solid var(--ha-error);
    color:      var(--ha-error);
}

.ha-form-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.ha-form-field label {
    font-size:      12px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ha-white);
}

.ha-form-field input[type="text"],
.ha-form-field input[type="email"],
.ha-form-field input[type="number"] {
    background:    var(--ha-gray-dark);
    border:        1px solid var(--ha-border);
    border-radius: var(--ha-radius);
    color:         var(--ha-white);
    font-size:     1rem;
    padding:       0.75rem 1rem;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color 0.2s;
    outline:       none;
}

.ha-form-field input[type="text"]:focus,
.ha-form-field input[type="email"]:focus,
.ha-form-field input[type="number"]:focus {
    border-color: var(--ha-blue);
}

.ha-form-field input::placeholder {
    color:   #999;
    opacity: 1;
}

.ha-form-field small {
    font-size: 12px;
    color:     #777;
}

.ha-form-field small strong {
    color: var(--ha-yellow);
}

/* Checkbox */
.ha-checkbox-field label {
    display:        flex;
    align-items:    flex-start;
    font-size:      0.875rem;
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          #ccc;
    cursor:         pointer;
    line-height:    1.5;
}

.ha-checkbox-field input[type="checkbox"] {
    width:        18px;
    height:       18px;
    accent-color: var(--ha-yellow);
    flex-shrink:  0;
    margin:   2px 6px 0px 0px;
    cursor:       pointer;
}

.ha-form-field.ha-checkbox-field a {
    color:           var(--ha-yellow);
    text-decoration: underline;
    font-weight:     600;
}

.ha-form-field.ha-checkbox-field a:hover {
    color: var(--ha-blue);
}

/* ================================
   Submit Button
   ================================ */
.ha-submit-btn {
    background:     var(--ha-yellow);
    color:          var(--ha-black);
    border:         none;
    border-radius:  var(--ha-radius);
    font-size:      1rem;
    font-weight:    400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        1rem 2rem;
    cursor:         pointer;
    width:          100%;
    transition:     background 0.15s, transform 0.1s;
    margin-top:     0.5rem;
}

.ha-submit-btn:hover {
    background: #e6d400;
}

.ha-submit-btn:active {
    transform: scale(0.98);
}

.ha-submit-btn:disabled {
    background: #1a3a55;
    color:      #555;
    cursor:     not-allowed;
    transform:  none;
}

/* ================================
   Trikot Übersichtstabelle – Desktop
   ================================ */
.ha-table-wrap {
    width:      100%;
    overflow-x: auto;
}

.ha-table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--ha-dark);
    color:           var(--ha-white);
    border-radius:   var(--ha-radius);
    overflow:        hidden;
}

.ha-table-th {
    background:     var(--ha-black);
    color:          var(--ha-yellow);
    font-size:      1rem;
    font-weight:    400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        12px 16px;
    text-align:     left;
    border-bottom:  2px solid var(--ha-blue);
    white-space:    nowrap;
}

.ha-table-row {
    border-bottom: 1px solid var(--ha-border);
    transition:    background 0.15s;
}

.ha-table-row:hover {
    background: var(--ha-gray-mid);
}

.ha-table-row:last-child {
    border-bottom: none;
}

.ha-table-row.ha-row-closed {
    opacity: 0.6;
}

.ha-table-td {
    padding:        12px 16px;
    vertical-align: middle;
    font-size:      0.95rem;
}

.ha-col-bild    { width: 200px; }
.ha-col-spieler { min-width: 160px; }
.ha-col-gebot   { width: 140px; }
.ha-col-anzahl  { width: 80px; text-align: center; }
.ha-col-ende    { width: 130px; }
.ha-col-aktion  { width: 130px; text-align: right; }

.ha-table-img-link img {
    width:         185px !important;
    height:        200px !important;
    object-fit:    cover !important;
    border-radius: var(--ha-radius);
    display:       block;
    border:        1px solid var(--ha-border);
}

.ha-table-no-img {
    width:           185px;
    height:          220px;
    background:      var(--ha-gray-mid);
    border-radius:   var(--ha-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #555;
    font-size:       1.2rem;
}

.ha-table-title {
    display:         block;
    color:           var(--ha-white) !important;
    font-weight:     600;
    font-size:       1rem;
    text-decoration: none !important;
    margin-bottom:   4px;
    transition:      color 0.15s;
}

.ha-table-title:hover {
    color: var(--ha-yellow) !important;
}

.ha-table-badge {
    display:        inline-block;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        2px 7px;
    border-radius:  2px;
}

.ha-badge-open {
    background: rgba(15, 105, 180, 0.2);
    color:      var(--ha-blue);
    border:     1px solid var(--ha-blue);
}

.ha-badge-closed {
    background: rgba(220, 50, 50, 0.15);
    color:      var(--ha-error);
    border:     1px solid var(--ha-error);
}

.ha-table-bid {
    display:     block;
    font-size:   1.1rem;
    font-weight: 400;
    color:       var(--ha-yellow);
    line-height: 1;
}

.ha-table-startpreis {
    font-size:  0.8rem;
    color:      #aaa;
    margin-top: 2px;
    display:    block;
}

.ha-table-count {
    font-weight: 600;
    color:       var(--ha-white);
}

.ha-table-date {
    display:       block;
    font-weight:   600;
    color:         var(--ha-white);
    line-height:   1;
    margin-bottom: 2px;
}

.ha-table-time {
    font-size:   0.8rem;
    color:       #aaa;
    white-space: nowrap;
}

.ha-table-btn {
    display:         inline-block;
    background:      var(--ha-yellow);
    color:           var(--ha-black) !important;
    font-size:       0.8rem;
    font-weight:     400;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    padding:         8px 14px;
    border:          1px solid var(--ha-yellow);
    border-radius:   var(--ha-radius);
    text-decoration: none !important;
    white-space:     nowrap;
    transition:      background 0.15s, transform 0.1s;
}

.ha-table-btn:hover {
    background: var(--ha-gray-mid);
    color:      var(--ha-yellow) !important;
    border:     1px solid var(--ha-yellow);
}

.ha-table-btn-closed {
    font-size:      0.8rem;
    font-weight:    600;
    color:          #555;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ================================
   Tablet (641px – 1024px)
   2-spaltiges Kartengrid
   ================================ */
@media (min-width: 641px) and (max-width: 1024px) {

    .ha-table thead {
        display: none;
    }

    .ha-table,
    .ha-table tbody {
        display: block;
        width:   100%;
    }

    .ha-table tbody {
        display:               grid;
        gap:                   1rem;
    }

    .ha-table-row {
        display:       block;
        background:    var(--ha-gray-dark);
        border:        1px solid var(--ha-border);
        border-bottom: 3px solid var(--ha-blue);
        overflow:      hidden;
    }

    .ha-table-row.ha-row-closed {
        opacity: 0.6;
    }

    .ha-table-td {
        display: block;
        width:   100% !important;
        padding: 0;
    }

    /* Bild oben volle Breite */
    .ha-col-bild {
        width: 100% !important;
    }

    .ha-table-img-link {
        display: block;
        width:   100%;
    }

    .ha-table-img-link img {
        width:      100% !important;
        height:     280px !important;
        object-fit: contain !important;
        border:     none;
        display:    block;
    }

    .ha-table-no-img {
        width:  100%;
        height: 280px;
        border: none;
    }

    .ha-col-spieler,
    .ha-col-gebot,
    .ha-col-anzahl,
    .ha-col-ende,
    .ha-col-aktion {
        display: block;
        padding: 10px 16px;
    }

    .ha-col-anzahl {
        text-align: left;
    }

    .ha-col-gebot::before  { content: "Höchstes Gebot: "; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }
    .ha-col-anzahl::before { content: "Gebote: ";         font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }
    .ha-col-ende::before   { content: "Endet am: ";       font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }

    .ha-col-aktion {
        padding: 12px 16px 16px;
    }

    .ha-table-btn {
        display:    block;
        width:      100%;
        text-align: center;
        padding:    12px;
        font-size:  0.9rem;
    }

    .ha-table-btn-closed {
        display:    block;
        text-align: center;
        padding:    8px 0;
    }
}

/* ================================
   Mobil (max 640px)
   1-spaltiges Kartengrid
   ================================ */
@media (max-width: 640px) {

    .ha-table thead {
        display: none;
    }

    .ha-table,
    .ha-table tbody {
        display: block;
        width:   100%;
    }

    .ha-table-row {
        display:       block;
        background:    var(--ha-gray-dark);
        border:        1px solid var(--ha-border);
        border-bottom: 3px solid var(--ha-blue);
        margin-bottom: 1rem;
        padding:       0;
        overflow:      hidden;
    }

    .ha-table-row:last-child {
        margin-bottom: 0;
    }

    .ha-table-td {
        display: block;
        width:   100% !important;
        padding: 0;
    }

    .ha-col-bild {
        width: 100% !important;
    }

    .ha-table-img-link {
        display: block;
        width:   100%;
    }

    .ha-table-img-link img {
        width:      100% !important;
        height:     350px !important;
        object-fit: cover !important;
        border:     none;
        display:    block;
    }

    .ha-table-no-img {
        width:  100%;
        height: 150px;
        border: none;
    }

    .ha-col-spieler,
    .ha-col-gebot,
    .ha-col-anzahl,
    .ha-col-ende,
    .ha-col-aktion {
        display: block;
        padding: 10px 16px;
    }

    .ha-col-anzahl {
        text-align: left;
    }

    .ha-col-gebot::before  { content: "Höchstes Gebot: "; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }
    .ha-col-anzahl::before { content: "Gebote: ";         font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }
    .ha-col-ende::before   { content: "Endet am: ";       font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; display: block; margin-bottom: 2px; }

    .ha-col-aktion {
        padding: 12px 16px 16px;
    }

    .ha-table-btn {
        display:    block;
        width:      100%;
        text-align: center;
        padding:    12px;
        font-size:  0.9rem;
    }

    .ha-table-btn-closed {
        display:    block;
        text-align: center;
        padding:    8px 0;
    }
}

/* ================================
   Formular Responsive
   ================================ */
@media (max-width: 480px) {
    .ha-auction-wrap {
        padding: 1.25rem;
    }

    .ha-bid-info {
        grid-template-columns: 1fr;
    }

    .ha-current-bid {
        font-size: 1.5rem;
    }

    .ha-countdown {
        font-size: 1rem;
    }
}