BODY {FONT-FAMILY: verdana,arial,helvetica,sans-serif;}

/* OBERER BEREICH */
.archive-top {
    background: #b4dbfd; /* hellblau */
    padding: 20px;
    min-height: calc(100vh - 135px); 
    /* 180px = Höhe TSV-Bereich
       8px   = Höhe/Abstand des Trenners (falls du ihn so definiert hast)
    */
    box-sizing: border-box;
}

.search_d-top {
    background: #b4dbfd; /* hellblau */
    padding: 20px;
    min-height: calc(100vh - 1px); 
    /* 180px = Höhe TSV-Bereich
       8px   = Höhe/Abstand des Trenners (falls du ihn so definiert hast)
    */
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* TRENNELEMENT */
.archive-divider {
    height: 8px;
    background: linear-gradient(to right, #ccc, #999, #ccc);
    margin: 0;
}

/* UNTERER BEREICH */
.archive-tsv {
    background: #d9f7d9;
    padding: 20px;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* sorgt dafür, dass die Überschrift immer allein steht */
.archive-tsv .pro_dm {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}




.pro_m_a {padding-left: 20px; padding-top: 20px; padding-bottom: 0px; color:#FF0000; FONT-SIZE: 12px; FONT-WEIGHT: bold}
.pro_rb_a {padding-left: 40px; color:#0000FF; font-size: 12px; }

.pro_m_b {padding-left: 20px; padding-top: 20px; padding-bottom: 0px; color:#FF0000; FONT-SIZE: 12px; FONT-WEIGHT: bold}
.pro_rb_b {padding-left: 40px; color:#0000FF; font-size: 12px; }

.spacer {
    height: 20px;
}

.pro_dm {
    font-weight: bold;
    font-size: 18px;
    display: block;
    width: auto;     /* statt 100% */
    color: #000000;
}

.pro_dr {
    font-size: 16px;
    display: block;
    width: auto;     /* statt 85% */
}

.pro_dr.warntext {
    color: #ef0303;
}
.pro_dn {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 0;   /* optional */
    width: auto;      /* statt 15% */
    flex-shrink: 0;   /* verhindert Umbruch */
    gap: 0       /* KEIN Abstand zwischen den Logos */
}

.pro_row {
    display: flex;
    align-items: center;
    gap: 20px; /* statt 20px */
}

.pro_dt {
    font-size: 12px;
    margin-bottom: 10px;
    width: auto;        /* WICHTIG: statt 70% */
    display: flex;      /* WICHTIG: Flex aktivieren */
    align-items: center;
}

.pro_dt.logos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}


.tsv-logo-large,
.tsv-logo-small {
    height: 50px;   /* gleiche Höhe */
    width: auto;    /* Breite proportional */
}

/* =========================================================
   iPhone PORTRAIT Fix für gil_archive.css
   ========================================================= */
@media (max-width: 480px) {

    /* Grundschrift */
    html {
        font-size: 13px;
    }

    /* OBERER BEREICH */
    .archive-top,
    .search_d-top {
        padding: 10px;
        min-height: auto; /* verhindert Überzoom */
    }

    /* Überschriften */
    .pro_dm {
        font-size: 1rem; /* 16px → 13px */
        margin-bottom: 6px;
    }

    .pro_dr {
        font-size: 0.9rem; /* 16px → 14px */
    }

    .pro_dn {
        font-size: 1rem; /* 18px → 16px */
    }

    .pro_dt {
        font-size: 0.8rem; /* 12px → 11px */
        margin-bottom: 6px;
    }

    /* Reihen-Abstände */
    .pro_row {
        gap: 10px;
    }

    /* Logos */
    .tsv-logo-large,
    .tsv-logo-small {
        height: 32px;
    }

    /* TSV-Bereich */
    .archive-tsv {
        padding: 10px;
        height: auto; /* verhindert gequetschten Bereich */
    }
}

/* =========================================================
   iPhone LANDSCAPE Fix für gil_archive.css
   ========================================================= */
@media (max-height: 480px) {

    html {
        font-size: 14px;
    }

    .archive-top,
    .search_d-top {
        padding: 12px;
        min-height: auto;
    }

    .pro_dm {
        font-size: 1.05rem;
    }

    .pro_dr {
        font-size: 0.95rem;
    }

    .pro_dn {
        font-size: 1.05rem;
    }

    .pro_dt {
        font-size: 0.85rem;
    }

    .pro_row {
        gap: 12px;
    }

    .tsv-logo-large,
    .tsv-logo-small {
        height: 36px;
    }

    .archive-tsv {
        padding: 12px;
        height: auto;
    }
}