.astroid-offcanvas {width: 320px;} .astroid-offcanvas .dropdown-menus {width: 320px !important;}.st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}.astroid-offcanvas-opened .astroid-wrapper{background:rgb(173, 181, 189);}.st-effect-2.astroid-offcanvas{z-index:0 !important;}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{visibility: visible; -webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}.st-effect-2.astroid-offcanvas::after{display:none;}.offcanvasDirRight .st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}.mobilemenu-slide.astroid-mobilemenu{visibility:visible;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}.mobilemenu-slide.astroid-mobilemenu-open .mobilemenu-slide.astroid-mobilemenu {visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}.mobilemenu-slide.astroid-mobilemenu::after{display:none;}#top{padding-top:10px;padding-bottom:10px}#ml2-tn2ti3i6d{margin-bottom:30px;padding:20px 20px 20px 20px}#ac-1530100662663{padding-right:30px}#ac-1530100662663{padding-right:30px}#team{background-color:rgb(255, 255, 255);padding-top:5%;padding-bottom:5%}#ba1-y3lgxn9n8{padding-top:30px;padding-bottom:30px}#bottom-a{background-color:rgba(255, 255, 255, 0);background-image:url(https://hsv-rhein-nette.de/images/2021/10/28/handball-torwart-1_klein.png);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;color:rgb(255, 255, 255);padding:150px 0px 150px 0px}#bottom-a a{color:rgb(255, 255, 255);}#bottom-a a:hover{color:rgb(255, 255, 255);}#be1-acnwvrwg3{padding:20px 20px 20px 20px}#be2-xcg7axca6{padding:20px 20px 20px 20px}#be3-va5sscf2e{padding:20px 20px 20px 20px}#be-k4nd3rd6k{background-color:rgb(34, 34, 34);color:rgb(255, 255, 255);padding-top:3%;padding-bottom:3%}#be-k4nd3rd6k a{color:rgb(204, 204, 204);}#be-k4nd3rd6k a:hover{color:rgb(255, 255, 255);}#f2c-qe89el34j{padding-top:4px;padding-bottom:4px}#f-oel6e1bpp{background-color:rgb(68, 68, 68);color:rgb(204, 204, 204);padding-top:10px;padding-bottom:10px}#f-oel6e1bpp a{color:rgb(170, 170, 170);}#f-oel6e1bpp a:hover{color:rgb(255, 255, 255);}body, .body{font-weight:400;text-transform:none;font-size:15px;letter-spacing:0em;line-height:1.7em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}h1, .h1{font-weight:700;text-transform:uppercase;font-size:40px;letter-spacing:0.08em;line-height:1.3em;font-family:Open Sans, Arial, Helvetica, sans-serif;}h2, .h2{font-weight:300;text-transform:none;font-size:30px;letter-spacing:0rem;line-height:1.3em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}h3, .h3{font-weight:300;text-transform:none;font-size:24px;letter-spacing:0em;line-height:1.3em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}h4, .h4{font-weight:300;text-transform:none;font-size:20px;letter-spacing:0em;line-height:1.4em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-weight:300;text-transform:uppercase;font-size:15px;letter-spacing:0em;line-height:1.6em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-weight:400;text-transform:none;font-size:15px;letter-spacing:0em;line-height:1.6em;font-family:Ubuntu, Arial, Helvetica, sans-serif;}body{background-color:rgb(255, 255, 255);color:rgb(0, 0, 0);}body a{color:rgb(34, 34, 34);}body a:hover{color:rgb(255, 123, 45);}header{color:rgb(0, 0, 0);}.astroid-header-section, .astroid-sidebar-header{background-color:rgb(255, 255, 255);}.astroid-logo-text .site-title{color:rgb(255, 255, 255);}.astroid-logo-text .site-tagline{color:rgb(44, 46, 54);}#astroid-sticky-header{background-color:rgb(255, 255, 255);}#astroid-sticky-header .astroid-nav .nav-link{color:rgb(51, 51, 51);}#astroid-sticky-header .astroid-nav .nav-link:hover{color:rgb(255, 123, 45);}#astroid-sticky-header .astroid-nav .nav-link:active, #astroid-sticky-header .astroid-nav .nav-link.active{color:rgb(0, 0, 0);}.astroid-nav .nav-link, .astroid-sidebar-menu .nav-link{color:rgb(119, 119, 119);}.astroid-nav .nav-link:hover, .astroid-sidebar-menu .nav-link:hover{color:rgb(255, 123, 45);}.astroid-nav .nav-link:focus, .astroid-sidebar-menu .nav-link:focus{color:rgb(255, 123, 45);}.astroid-nav .nav-link:active, .astroid-nav .nav-link.active, .astroid-sidebar-menu .nav-link:active, .astroid-sidebar-menu .nav-link.active{color:rgb(0, 0, 0);}.megamenu-container{background-color:rgb(255, 255, 255);}.megamenu-container .nav-submenu .nav-submenu{background-color:rgb(255, 255, 255);}.has-megamenu.open .arrow{border-bottom-color:rgb(255, 255, 255);}.megamenu-container li.nav-item-submenu > a{color:rgb(0, 0, 0);}.megamenu-container li.nav-item-submenu > a:hover{color:rgb(255, 255, 255);background-color:rgb(255, 123, 45);}.megamenu-container li.nav-item-submenu > a:active, .megamenu-container li.nav-item-submenu > a.active{color:rgb(0, 0, 0);background-color:rgb(242, 242, 242);}.astroid-offcanvas, .astroid-offcanvas .burger-menu-button, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus{ background-color: rgb(255, 255, 255) !important;}.astroid-offcanvas { color: rgb(0, 0, 0) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a, .astroid-offcanvas .menu-indicator{ color: rgb(0, 0, 0) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > .nav-header, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a, .astroid-offcanvas .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a + .menu-indicator{ color: rgb(255, 123, 45) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active { background-color: rgb(255, 255, 255) !important;}.header-offcanvas-trigger.burger-menu-button .inner, .header-offcanvas-trigger.burger-menu-button .inner::before, .header-offcanvas-trigger.burger-menu-button .inner::after{background-color: rgb(153, 153, 153);}.astroid-offcanvas .burger-menu-button .inner, .astroid-offcanvas .burger-menu-button .inner::before, .astroid-offcanvas .burger-menu-button .inner::after{background-color: rgb(0, 0, 0);}.astroid-mobilemenu, .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus{ background-color: rgb(255, 255, 255) !important;}.astroid-mobilemenu { color: rgb(0, 0, 0) !important;}.astroid-mobilemenu .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a, .astroid-mobilemenu .menu-indicator{ color: rgb(0, 0, 0) !important;}.astroid-mobilemenu .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a, .astroid-mobilemenu .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > .nav-header, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a + .menu-indicator{ color: rgb(255, 123, 45) !important;}.astroid-mobilemenu .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active { background-color: rgb(242, 242, 242) !important;}.header-mobilemenu-trigger.burger-menu-button .inner, .header-mobilemenu-trigger.burger-menu-button .inner::before, .header-mobilemenu-trigger.burger-menu-button .inner::after{background-color: rgb(255, 255, 255);}.astroid-mobilemenu-open .burger-menu-button .inner, .astroid-mobilemenu-open .burger-menu-button .inner::before, .astroid-mobilemenu-open .burger-menu-button .inner::after{background-color: rgb(0, 0, 0);}.astroid-contact-info i[class*="fa-"]{color:rgb(253, 126, 20);}/* =========================================================
   HSV RHEIN-NETTE – MANNSCHAFTSSEITEN
   Zentrales Design für Mannschaften, Herren, Damen, Jugend
   ========================================================= */


/* =========================================================
   ALLGEMEINE MANNSCHAFTSÜBERSICHT
   ========================================================= */

.team-overview {
    max-width: 1100px;
    margin: 0 auto;
}


/* ---------- Einleitung ---------- */

.team-intro,
.mannschaften-blog .category-desc {
    text-align: center;
    margin: 10px auto 35px;
    max-width: 900px;
}

.team-intro h2,
.mannschaften-blog .category-desc h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
}

.team-intro p,
.mannschaften-blog .category-desc p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}


/* =========================================================
   HAUPTSEITE "MANNSCHAFTEN"
   ========================================================= */


/* ---------- Kartenraster ---------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}


/* ---------- Karte ---------- */

.team-card {
    display: block;
    padding: 28px 24px;

    border: 1px solid #e5e5e5;
    border-top: 4px solid #f47b20;
    border-radius: 6px;

    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.team-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    color: inherit;
    text-decoration: none;
}


/* ---------- Kartentexte ---------- */

.team-kicker {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;

    color: #f47b20;
}

.team-card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
}

.team-card p {
    margin: 0 0 20px;
    color: #666;
    line-height: 1.5;
}

.team-link {
    color: #f47b20;
    font-weight: 600;
}


/* =========================================================
   KATEGORIEBLOG
   HERREN / DAMEN / JUGEND
   ========================================================= */


/* ---------- Mannschaftskarte ---------- */

.mannschaft-card {
    background: #fff;

    border: 1px solid #e5e5e5;
    border-top: 4px solid #f47b20;
    border-radius: 6px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);

    height: auto;
    align-self: start;

    overflow: hidden;

    /* Abstand zur nächsten Karte */
    margin-bottom: 24px;
}


/* ---------- Mehr Luft im Joomla-Blograster ---------- */

.mannschaften-blog .blog-item,
.mannschaften-blog .item,
.mannschaften-blog .item-column {
    margin-bottom: 24px;
}

.mannschaften-blog .items-row {
    margin-bottom: 0;
}


/* ---------- Mannschaftsfoto ---------- */

.mannschaft-card .item-image {
    margin: 0;
    padding: 0;
}

.mannschaft-card .item-image img {
    display: block;
    width: 100%;

    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
}


/* ---------- Mannschaftsname ---------- */

.mannschaft-card h2,
.mannschaft-card .item-title {
    margin: 22px 24px 8px;

    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
}


/* ---------- Liga / Jahrgänge / Beschreibung ---------- */

.mannschaft-card p {
    margin: 0 24px 12px;

    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.mannschaft-card p strong {
    font-weight: 600;
}


/* ---------- Mannschaft ansehen ---------- */

.mannschaft-card .readmore {
    margin: 20px 24px 26px;
}

.mannschaft-card .readmore a {
    color: #f47b20;
    font-weight: 600;
    text-decoration: none;
}

.mannschaft-card .readmore a:hover {
    color: #e66d14;
    text-decoration: none;
}


/* =========================================================
   SEITENÜBERSCHRIFT KATEGORIEBLOG
   ========================================================= */

.mannschaften-blog h1 {
    margin-bottom: 28px;

    font-size: 30px;
    font-weight: 400;

    text-transform: none;
    letter-spacing: 0;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    margin-bottom: 22px;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .team-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .team-intro,
    .mannschaften-blog .category-desc {
        margin-bottom: 28px;
    }

    .mannschaft-card {
        margin-bottom: 26px;
    }

    .mannschaften-blog .blog-item,
    .mannschaften-blog .item,
    .mannschaften-blog .item-column {
        margin-bottom: 26px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 600px) {

    .team-overview {
        width: 100%;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .team-card {
        padding: 22px 20px;
    }

    .team-intro,
    .mannschaften-blog .category-desc {
        margin-top: 8px;
        margin-bottom: 26px;
    }

    .team-intro h2,
    .mannschaften-blog .category-desc h2 {
        font-size: 24px;
    }

    .team-intro p,
    .mannschaften-blog .category-desc p {
        font-size: 14px;
        line-height: 1.5;
    }

    .mannschaft-card {
        margin-bottom: 30px;
    }

    .mannschaften-blog .blog-item,
    .mannschaften-blog .item,
    .mannschaften-blog .item-column {
        margin-bottom: 30px;
    }

    .mannschaft-card h2,
    .mannschaft-card .item-title {
        margin: 18px 20px 10px;
        font-size: 21px;
    }

    .mannschaft-card p {
        margin: 0 20px 14px;
        font-size: 14px;
    }

    .mannschaft-card .readmore {
        margin: 20px 20px 24px;
    }

    .breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }
}

/* =========================================================
   INFOZEILE AUF DER MANNSCHAFTSÜBERSICHT
   z.B. Liga oder Jahrgänge
   ========================================================= */

.mannschaft-card .hsv-team-intro {
    margin: 14px 24px 20px;
    padding: 0;

    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.mannschaft-card .hsv-team-intro p {
    margin: 0;
}

.mannschaft-card .hsv-team-intro strong {
    color: #444;
    font-weight: 600;
}


/* Abstand zum "Mannschaft ansehen"-Link */
.mannschaft-card .hsv-team-intro + .readmore {
    margin-top: 20px;
}

/* =========================================================
   INTRO-INFOS NUR AUF DER MANNSCHAFTSÜBERSICHT
   ========================================================= */

/*
 * Standardmäßig ausblenden.
 * Dadurch erscheint "Jahrgänge: ..." bzw. die Liga
 * NICHT mehr auf der Detailseite.
 */
.hsv-team-intro {
    display: none;
}


/*
 * Innerhalb einer Mannschaftskarte wieder anzeigen.
 * Dort brauchen wir die Info auf Herren/Damen/Jugend.
 */
.mannschaft-card .hsv-team-intro {
    display: block;

    margin: 12px 24px 18px;
    padding: 0;

    color: #555;
    font-size: 14px;
    line-height: 1.5;
}


/* Absatz innerhalb der Infozeile */
.mannschaft-card .hsv-team-intro p {
    margin: 0;
}


/* "Jahrgänge:" etwas hervorheben */
.mannschaft-card .hsv-team-intro strong {
    color: #333;
    font-weight: 600;
}


/* Abstand zum Mannschaft-ansehen-Link */
.mannschaft-card .hsv-team-intro + .readmore {
    margin-top: 18px;
}


/* Smartphone */
@media (max-width: 600px) {

    .mannschaft-card .hsv-team-intro {
        margin: 12px 20px 18px;
    }
}

/* =========================================================
   LIGA-LINK AUF MANNSCHAFTSDETAILSEITEN
   ========================================================= */

.hsv-liga-block {
    margin: 12px 0 24px;
}

.hsv-detail-label {
    margin-bottom: 6px;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #777;
}

.hsv-liga-pill {
    position: relative;
    display: inline-flex;
    align-items: center;

    padding: 6px 13px;

    border: 1px solid #f47b20;
    border-radius: 18px;

    color: #f47b20;
    font-size: 14px;
    font-weight: 600;

    background: #fff;
}

.hsv-liga-name {
    position: relative;
    z-index: 1;
}


/*
 * Das Joomla-URL-Feld liegt unsichtbar
 * über der gesamten sichtbaren Schaltfläche.
 */
.hsv-liga-link {
    position: absolute;
    inset: 0;
    z-index: 2;

    font-size: 0;
    color: transparent;

    pointer-events: none;
}

.hsv-liga-link a {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    opacity: 0;

    pointer-events: auto;
    cursor: pointer;
}

.hsv-liga-pill:hover {
    background: #f47b20;
    color: #fff;
}@media (max-width: 991.98px) {body, .body{font-size:14px;letter-spacing:0em;line-height:1.7em;}h1, .h1{font-size:38px;letter-spacing:0em;line-height:1.3em;}h2, .h2{font-size:30px;letter-spacing:0em;line-height:1.3em;}h3, .h3{font-size:24px;letter-spacing:0em;line-height:1.3em;}h4, .h4{font-size:20px;letter-spacing:0em;line-height:1.2em;}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-size:15px;letter-spacing:0em;line-height:1.6em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-size:14px;letter-spacing:0em;line-height:1.6em;}}@media (max-width: 767.98px) {body, .body{font-size:14px;letter-spacing:0em;line-height:1.7em;}h1, .h1{font-size:36px;letter-spacing:0em;line-height:1.3em;}h2, .h2{font-size:30px;letter-spacing:0em;line-height:1.3em;}h3, .h3{font-size:20px;letter-spacing:0em;line-height:1.2em;}h4, .h4{font-size:18px;letter-spacing:0em;line-height:1.2em;}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-size:14px;letter-spacing:0em;line-height:1.6em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-size:15px;letter-spacing:0em;line-height:1.6em;}}