*{box-sizing:border-box}

body{
    margin:0;
    background:#0d0d10;
    color:#ddd;
    font-family:Arial,Helvetica,sans-serif
}

a{
    color:inherit;
    text-decoration:none
}

.container{
    max-width:1240px;
    margin:0 auto;
    padding:0 18px
}


/* =========================================================
   HEADER
   ========================================================= */

header{
    background:#0d0d10;
    border-bottom:1px solid #25252b
}

.header{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.logo{
    font-size:25px;
    font-weight:900;
    letter-spacing:1.8px
}

.logo span{
    color:#df5595
}

.age{
    font-size:11px;
    color:#777;
    border-left:1px solid #303037;
    padding-left:12px
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    padding:28px 0 20px;
    text-align:left;
    display:grid;
    grid-template-columns:1fr 250px;
    gap:28px;
    align-items:center;
    border-bottom:1px solid #25252b
}

.hero-image{
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
    width:250px;
}

.hero-image a{
    display:block;
    width:250px;
    height:250px;
}

.hero-image img{
    display:block;
    width:250px;
    height:250px;
    object-fit:cover;
    margin:0;
    border-radius:6px;
    opacity:.9
}
    


/* =========================================================
   ABSCHNITT-TITEL
   ========================================================= */

.section-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:24px 0 10px;
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#aaa
}

.badge{
    font-size:9px;
    background:#df5595;
    color:#fff;
    padding:3px 6px;
    border-radius:3px
}


/* =========================================================
   ANBIETER-GRID
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
}


/* =========================================================
   ANBIETER-KARTE
   ========================================================= */

.card{
    background:#121216;
    border:1px solid #24242a;
    border-radius:6px;
    padding:10px;

    display:grid;

    grid-template-columns:64px 1fr;

    column-gap:10px;

    min-height:145px;

    align-items:start
}

.card:hover{
    border-color:#4b3040
}

.card.top{
    border-color:#5a3448
}


/* =========================================================
   ANBIETERBILD
   VERTIKAL MITTIG IN DER KARTE
   ========================================================= */

.logo-box{
    width:64px;
    height:64px;

    border-radius:5px;

    background:#202027;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:800;
    color:#777;

    overflow:hidden;

    /*
       Wichtig:
       Bild wird nicht mehr oben,
       sondern vertikal mittig in der
       gesamten Karte ausgerichtet.
    */
    align-self:center
}

.logo-box img{
    width:100%;
    height:100%;
    object-fit:cover
}


/* =========================================================
   ANBIETER-INHALT
   ========================================================= */

.listing-content{
    min-width:0;
    text-align:left
}


/* =========================================================
   ANBIETERNAME
   ========================================================= */

.name{
    font-size:17px !important;
    line-height:1.25 !important;

    font-weight:800;

    margin-bottom:4px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}


/* =========================================================
   BESCHREIBUNG
   BIS ZU 5 ZEILEN
   ========================================================= */

.desc{
    font-size:13px !important;
    line-height:1.4 !important;

    color:#777;

    display:-webkit-box;

    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;

    line-clamp:5;

    overflow:hidden
}


/* =========================================================
   BEWERTUNG
   ========================================================= */

.rating{
    font-size:11px;
    color:#e7a4c3;

    margin-top:5px;

    letter-spacing:.7px
}

.rating span{
    color:#666;

    letter-spacing:0;

    font-size:10px;

    margin-left:3px
}


/* =========================================================
   BUTTON
   ========================================================= */

.button-row{
    display:flex;
    justify-content:flex-start;

    margin-top:8px;

    grid-column:1 / -1
}

.visit{
    display:inline-block;

    background:transparent;

    border:1px solid #3b3037;

    color:#ddd;

    padding:6px 9px;

    border-radius:4px;

    font-size:10px;

    font-weight:800;

    white-space:nowrap
}

.visit:hover{
    border-color:#df5595;
    color:#df5595
}


/* =========================================================
   WERBEBANNER
   728 × 90 PX
   ========================================================= */

.ad-banner{
    width:100%;

    margin:20px 0;

    text-align:center;

    overflow:hidden
}

.ad-banner img{
    display:block;

    width:728px;

    max-width:100%;

    height:90px;

    object-fit:contain;

    margin:0 auto
}

.ad-placeholder{
    width:100%;

    min-height:90px;

    margin:20px 0;

    border:1px dashed #2f2f36;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#5f5d64;

    font-size:10px;

    letter-spacing:.5px
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination{
    text-align:center;

    padding:25px 0 40px
}

.page{
    display:inline-block;

    border:1px solid #303037;

    padding:7px 10px;

    margin:2px;

    border-radius:4px;

    color:#777;

    font-size:12px
}

.page:hover{
    border-color:#df5595;
    color:#df5595
}

.page.active{
    background:#df5595;

    color:#fff;

    border-color:#df5595
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    border-top:1px solid #25252b;

    padding:24px 20px;

    text-align:center;

    color:#5f5d64;

    font-size:11px
}


/* =========================================================
   INTERNE ANBIETER-LINKS
   ========================================================= */

.provider-image-link{
    display:block;

    color:inherit;

    text-decoration:none
}

.provider-name-link{
    color:inherit;

    text-decoration:none
}

.provider-name-link:hover{
    text-decoration:underline
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .hero{
        grid-template-columns:1fr
    }

    .hero-image{
        grid-column:1;
        grid-row:auto;

        max-width:500px
    }
}


/* =========================================================
   KLEINER TABLET
   ========================================================= */

@media(max-width:760px){

    .container{
        padding:0 13px
    }

    .hero h1{
        font-size:28px
    }

    .grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .card{
        grid-template-columns:56px 1fr;

        min-height:145px
    }

    .logo-box{
        width:56px;
        height:56px;

        /*
           Auch auf Tablet vertikal mittig
        */
        align-self:center
    }

    .name{
        font-size:16px !important
    }

    .desc{
        font-size:12px !important;
        line-height:1.4 !important;

        -webkit-line-clamp:5;
        line-clamp:5
    }

    .button-row{
        justify-content:center
    }

    .visit{
        padding:6px 7px;

        font-size:9px
    }
}


/* =========================================================
   HANDY
   ========================================================= */

@media(max-width:480px){

    .grid{
        grid-template-columns:1fr
    }

    .card{
        grid-template-columns:64px 1fr;

        min-height:140px
    }

    .logo-box{
        width:64px;
        height:64px;

        /*
           Auch auf Handy vertikal mittig
        */
        align-self:center
    }

    .name{
        font-size:17px !important
    }

    .desc{
        font-size:13px !important;

        -webkit-line-clamp:5;
        line-clamp:5
    }
}