/* =========================================================

   UNITED PEAKS CYCLING TEAM

   GLOBAL DESIGN SYSTEM

   ========================================================= */

:root {

    /* BRAND */

    --up-navy: #192b48;

    --up-navy-soft: #52647d;

    --up-navy-dark: #101c2f;

    --up-black: #0f1114;

    --up-text: #20242a;

    --up-muted: #737982;

    --up-white: #ffffff;

    --up-bg: #ffffff;

    --up-bg-soft: #f5f6f7;

    --up-border: #e5e7ea;

    /* LAYOUT */

    --up-container: 1240px;

    --up-radius-sm: 8px;

    --up-radius: 14px;

    --up-radius-lg: 22px;

    /* SHADOW */

    --up-shadow:

        0 16px 50px

        rgba(15, 17, 20, 0.07);

    /* TRANSITIONS */

    --up-transition:

        180ms ease;

}
body {
    font-family: "Inter", sans-serif;
    color: var(--up-text);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

button,
input,
textarea,
select {
    font: inherit;
}

.btn {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
}

/* =========================================================

   BASIS

   ========================================================= */

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    background:

        var(--up-bg);

    color:

        var(--up-text);

    font-family:

        "Inter",

        sans-serif;

    font-size:

        16px;

    line-height:

        1.6;

    -webkit-font-smoothing:

        antialiased;

}

main {

    min-height:

        70vh;

}

::selection {

    background:

        var(--up-navy-soft);

    color:

        var(--up-white);

}

/* =========================================================

   CONTAINER

   ========================================================= */

.up-container {

    max-width:

        var(--up-container);

}

/* =========================================================

   TYPOGRAFIE

   ========================================================= */

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family:

        "Manrope",

        sans-serif;

    color:

        var(--up-black);

    letter-spacing:

        -0.025em;

}

h1 {

    font-weight:

        800;

}

h2 {

    font-weight:

        700;

}

p {

    color:

        var(--up-text);

}

.text-muted {

    color:

        var(--up-muted) !important;

}

/* =========================================================

   LINKS

   ========================================================= */

a {

    color:

        inherit;

    transition:

        color var(--up-transition),

        opacity var(--up-transition);

}

/* =========================================================

   NAVBAR

   ========================================================= */

.up-navbar {

    min-height:

        82px;

    background:

        rgba(255, 255, 255, 0.94);

    border-bottom:

        1px solid

        rgba(15, 17, 20, 0.07);

    backdrop-filter:

        blur(16px);

    -webkit-backdrop-filter:

        blur(16px);

}

.up-brand {

    display:

        flex;

    flex-direction:

        column;

    align-items:

        flex-start;

    line-height:

        1;

    margin-right:

        3rem;

}

.up-brand-logo {
    display: block;
    width: auto;
    height: 64px;
}

/* =========================================================

   NAV LINKS

   ========================================================= */

.up-nav-link {

    position:

        relative;

    margin:

        0 0.5rem;

    padding:

        0.7rem 0.45rem !important;

    color:

        var(--up-text);

    font-size:

        0.92rem;

    font-weight:

        500;

}

.up-nav-link:hover {

    color:

        var(--up-navy);

}

.up-nav-link::after {

    content:

        "";

    position:

        absolute;

    left:

        50%;

    bottom:

        4px;

    width:

        0;

    height:

        2px;

    background:

        var(--up-navy);

    transform:

        translateX(-50%);

    transition:

        width var(--up-transition);

}

.up-nav-link:hover::after {

    width:

        18px;

}

.up-nav-link.active {

    color:

        var(--up-navy);

    font-weight:

        700;

}

.up-nav-link.active::after {

    width:

        24px;

}

/* =========================================================

   LOGIN BUTTON

   ========================================================= */

.up-nav-account {

    border:

        1px solid

        var(--up-black);

    border-radius:

        999px;

    padding:

        0.48rem 1.15rem;

    background:

        transparent;

    color:

        var(--up-black);

    font-size:

        0.85rem;

    font-weight:

        600;

    transition:

        background var(--up-transition),

        color var(--up-transition),

        border-color var(--up-transition);

}

.up-nav-account:hover {

    background:

        var(--up-navy);

    border-color:

        var(--up-navy);

    color:

        var(--up-white);

}

/* =========================================================

   MOBILE NAVBAR

   ========================================================= */

.up-navbar-toggler {

    border:

        0;

    padding:

        0.35rem;

}

.up-navbar-toggler:focus {

    box-shadow:

        none;

}

/* =========================================================

   BOOTSTRAP BUTTON OVERRIDES

   ========================================================= */

.btn {

    border-radius:

        999px;

    font-weight:

        600;

    padding:

        0.65rem 1.25rem;

    transition:

        transform var(--up-transition),

        box-shadow var(--up-transition),

        background var(--up-transition),

        color var(--up-transition),

        border-color var(--up-transition);

}

.btn:hover {

    transform:

        translateY(-1px);

}

.btn-dark {

    background:

        var(--up-navy);

    border-color:

        var(--up-navy);

}

.btn-dark:hover,

.btn-dark:focus {

    background:

        var(--up-navy-dark);

    border-color:

        var(--up-navy-dark);

}

.btn-outline-dark {

    border-color:

        var(--up-black);

    color:

        var(--up-black);

}

.btn-outline-dark:hover {

    background:

        var(--up-navy);

    border-color:

        var(--up-navy);

}

/* =========================================================

   CARDS / BOXEN

   ========================================================= */

.card {

    border:

        1px solid

        var(--up-border);

    border-radius:

        var(--up-radius);

    overflow:

        hidden;

    background:

        var(--up-white);

}

.card:hover {

    border-color:

        rgba(25, 43, 72, 0.25);

}

/* =========================================================

   FORMULARE

   ========================================================= */

.form-control,

.form-select {

    border:

        1px solid

        var(--up-border);

    border-radius:

        var(--up-radius-sm);

    padding:

        0.75rem 0.9rem;

}

.form-control:focus,

.form-select:focus {

    border-color:

        var(--up-navy);

    box-shadow:

        0 0 0 0.2rem

        rgba(25, 43, 72, 0.10);

}

/* =========================================================

   BADGES

   ========================================================= */

.badge {

    border-radius:

        999px;

    font-weight:

        600;

    padding:

        0.45em 0.75em;

}

/* =========================================================

   SOFT SECTIONS

   ========================================================= */

.up-section-soft {

    background:

        var(--up-bg-soft);

}

/* =========================================================

   SECTION LABEL

   ========================================================= */

.up-eyebrow {

    margin-bottom:

        0.75rem;

    color:

        var(--up-navy);

    font-size:

        0.72rem;

    font-weight:

        700;

    letter-spacing:

        0.16em;

    text-transform:

        uppercase;

}

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

.up-site-footer {
    margin-top: 7rem;
    padding: 3rem 0 2.5rem;

    background: var(--up-navy-dark);
    color: var(--up-white);
}

.up-site-footer-main {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 3rem;
}


/* BRAND */

.up-site-footer-brand {
    font-family: "Manrope", sans-serif;

    font-size: 1.3rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;
}

.up-site-footer-sub {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}


/* IMPRESSUM */

.up-site-footer-legal {
    margin-top: 1.3rem;

    max-width: 320px;
}

.up-site-footer-legal-title {
    margin-bottom: 0.35rem;

    color: rgba(255, 255, 255, 0.82);

    font-family: "Manrope", sans-serif;

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.up-site-footer-legal-label {
    margin-bottom: 0.2rem;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.62rem;
    line-height: 1.4;
}

.up-site-footer-legal-text {
    color: rgba(255, 255, 255, 0.56);

    font-size: 0.68rem;
    line-height: 1.5;
}

.up-site-footer-mail {
    display: inline-block;

    margin-top: 0.3rem;

    color: rgba(255, 255, 255, 0.56);

    font-size: 0.68rem;

    text-decoration: none;
}

.up-site-footer-mail:hover {
    color: #ffffff;
}


/* CLAIM RECHTS */

.up-site-footer-claim {
    display: flex;

    align-items: center;

    gap: 1.25rem;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.78rem;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .up-site-footer-main {
        flex-direction: column;

        align-items: flex-start;

        gap: 2.25rem;
    }

    .up-site-footer-claim {
        gap: 1rem;

        font-size: 0.72rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .up-site-footer {
        margin-top: 5rem;

        padding: 2.5rem 0;
    }

    .up-site-footer-legal {
        margin-top: 1.1rem;
    }

    .up-site-footer-legal-text,
    .up-site-footer-mail {
        font-size: 0.66rem;
    }
}

/* =========================================================

   HOME GRUNDFLÄCHEN

   ========================================================= */

.up-home-section {

    padding: 7rem 0;

}

.up-home-white {

    background: #ffffff;

}

.up-home-soft {

    background: var(--up-bg-soft);

}

/* =========================================================
   INSTAGRAM SHOWCASE
   ========================================================= */

.up-instagram-section {
    overflow: hidden;
}


/* ÜBERSCHRIFT */

.up-instagram-copy {
    text-align: center;
    margin-bottom: 1.5rem;
}

.up-instagram-copy .up-home-heading {
    margin-bottom: 0;
}


/* GESAMTER SHOWCASE */

.up-instagram-showcase {
    position: relative;

    display: block;

    width: 100%;
    max-width: 980px;
    height: 590px;

    margin: 0 auto;

    text-decoration: none;
}


/* HINTERGRUND-SCHRIFT */

.up-instagram-bg {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            5rem,
            11vw,
            9rem
        );

    font-weight: 800;

    letter-spacing:
        -0.06em;

    color:
        rgba(
            25,
            43,
            72,
            0.055
        );

    white-space:
        nowrap;

    pointer-events:
        none;
}


/* =========================================================
   PHONES
   ========================================================= */

.up-insta-phone {
    position: absolute;

    width: 210px;
    height: 430px;

    padding: 10px;

    overflow: hidden;

    background: #111111;

    border-radius: 2rem;

    box-shadow:
        0 24px 55px
        rgba(15, 17, 20, 0.24);

    z-index: 2;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}


/* SCREEN */

.up-insta-screen {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #111111;

    border-radius: 1.45rem;

    line-height: 0;
}


/* BILDER UND VIDEOS */

.up-insta-screen img,
.up-insta-screen video {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: cover;

    vertical-align: top;
}


/* VIDEO MINIMAL VERGRÖSSERN
   falls weiße Frames sichtbar sind */

.up-insta-screen video {
    transform:
        scale(1.015);
}


/* =========================================================
   DESKTOP POSITIONEN
   ========================================================= */

.up-insta-phone-1 {
    top: 70px;
    left: 50%;

    transform:
        translateX(-190%)
        rotate(-10deg);

    z-index: 1;
}


.up-insta-phone-2 {
    top: 125px;
    left: 50%;

    transform:
        translateX(-95%)
        rotate(-4deg);

    z-index: 3;
}


.up-insta-phone-3 {
    top: 40px;
    left: 50%;

    transform:
        translateX(5%)
        rotate(5deg);

    z-index: 4;
}


.up-insta-phone-4 {
    top: 110px;
    left: 50%;

    transform:
        translateX(100%)
        rotate(10deg);

    z-index: 2;
}


/* =========================================================
   HOVER
   ========================================================= */

.up-instagram-showcase:hover
.up-insta-phone {
    box-shadow:
        0 30px 65px
        rgba(15, 17, 20, 0.30);
}

.up-instagram-showcase:hover
.up-insta-phone-1 {
    transform:
        translateX(-190%)
        translateY(-8px)
        rotate(-12deg);
}

.up-instagram-showcase:hover
.up-insta-phone-2 {
    transform:
        translateX(-95%)
        translateY(-6px)
        rotate(-2deg);
}

.up-instagram-showcase:hover
.up-insta-phone-3 {
    transform:
        translateX(5%)
        translateY(-10px)
        rotate(7deg);
}

.up-instagram-showcase:hover
.up-insta-phone-4 {
    transform:
        translateX(100%)
        translateY(-7px)
        rotate(12deg);
}

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

@media (max-width: 991px) {

    .up-instagram-showcase {
        max-width: 760px;
        height: 530px;
    }


    .up-insta-phone {
        width: 185px;
        height: 380px;
    }


    .up-insta-phone-1 {
        top: 70px;

        transform:
            translateX(-170%)
            rotate(-9deg);
    }


    .up-insta-phone-2 {
        top: 120px;

        transform:
            translateX(-90%)
            rotate(-3deg);
    }


    .up-insta-phone-3 {
        top: 45px;

        transform:
            translateX(0%)
            rotate(5deg);
    }


    .up-insta-phone-4 {
        top: 115px;

        transform:
            translateX(85%)
            rotate(9deg);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .up-instagram-copy {
        margin-bottom: 1rem;
    }


    .up-instagram-showcase {
        width: 100%;
        height: 500px;

        margin:
            0 auto;
    }


    .up-instagram-bg {
        display: block;

        font-size:
            4rem;
    }


    .up-insta-phone {
        width: 145px;
        height: 300px;
    }


    .up-insta-phone-1 {
        top: 50px;
        left: 50%;

        transform:
            translateX(-135%)
            rotate(-10deg);

        z-index: 1;
    }


    .up-insta-phone-2 {
        top: 155px;
        left: 50%;

        transform:
            translateX(-80%)
            rotate(-4deg);

        z-index: 3;
    }


    .up-insta-phone-3 {
        top: 30px;
        left: 50%;

        transform:
            translateX(-5%)
            rotate(5deg);

        z-index: 4;
    }


    .up-insta-phone-4 {
        top: 145px;
        left: 50%;

        transform:
            translateX(55%)
            rotate(10deg);

        z-index: 2;
    }

}
/* =========================================================
   SPONSOREN
   ========================================================= */

.up-sponsor-intro {
    max-width: 760px;
    margin-bottom: 3.5rem;
}

.up-sponsor-intro-text {
    max-width: 650px;
    margin-top: 1.25rem;
    margin-bottom: 0;
    color: var(--up-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}


/* LOGO-KARTEN */

.up-sponsor-card {
    width:88%;
    margin: 0 auto;

    min-height: 150px;
    height: 150px;

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

    padding: 1rem;

    background: #ffffff;

    border: 1px solid var(--up-border);
    border-radius: var(--up-radius);

    overflow: hidden;

    cursor: pointer;

    transition:
        transform var(--up-transition),
        box-shadow var(--up-transition),
        border-color var(--up-transition);
}
.row .col-md-4 > .up-sponsor-card {
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
}

.up-sponsor-card:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 43, 72, 0.18);
    box-shadow: var(--up-shadow);
}

.up-sponsor-logo {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 320px;
    max-height: 140px;

    object-fit: contain;
}
/* MODAL */

.up-sponsor-modal {
    padding: 1rem;

    border: 0;
    border-radius: var(--up-radius-lg);

    box-shadow:
        0 30px 80px
        rgba(15, 17, 20, 0.16);
}

.up-sponsor-modal .modal-header {
    padding: 1.75rem 1.75rem 1rem;
}

.up-sponsor-modal .modal-body {
    padding: 1rem 1.75rem;
}

.up-sponsor-modal .modal-footer {
    padding: 1rem 1.75rem 1.75rem;

    gap: 0.5rem;
}


/* MODAL TEXTE */

.up-sponsor-modal-headline {
    max-width: 650px;

    margin-bottom: 1.5rem;

    color: var(--up-black);

    font-family: "Manrope", sans-serif;

    font-size: 1.2rem;
    font-weight: 800;

    line-height: 1.4;
}

.up-sponsor-modal-text {
    max-width: 680px;

    color: var(--up-muted);

    line-height: 1.75;
}

.up-sponsor-modal-claim {
    margin-top: 1.75rem;
    margin-bottom: 0;

    color: var(--up-navy);

    font-family: "Manrope", sans-serif;

    font-weight: 700;
}


/* MOBILE */

@media (max-width: 767px) {

    .up-sponsor-intro {
        margin-bottom: 2.5rem;
    }

    @media (max-width: 767px) {

    .up-sponsor-card {
        min-height: 135px;
        height: 135px;

        padding: 0.9rem;
    }

    .up-sponsor-logo {
        width: 100%;
        height: 100%;

        max-width: 95%;
        max-height: 95px;

        object-fit: contain;
    }

}

    .up-sponsor-modal {
        padding: 0.25rem;
    }

    .up-sponsor-modal .modal-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .up-sponsor-modal .modal-body {
        padding: 0.75rem 1.25rem;
    }

    .up-sponsor-modal .modal-footer {
        padding: 0.75rem 1.25rem 1.25rem;
    }

}
/* =========================================================

   KIT

   ========================================================= */

.up-kit-title {

    max-width: 500px;

    margin-bottom: 1.5rem;

    font-size: clamp(2.5rem, 5vw, 4.6rem);

    font-weight: 800;

    line-height: 1;

}

.up-kit-text {

    max-width: 460px;

    color: var(--up-muted);

    font-size: 1.05rem;

}

.up-kit-visual {

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

}

.up-kit-image {

    display: block;

    width: 100%;

    max-width: 620px;

    max-height: 620px;

    object-fit: contain;

}

/* =========================================================

   MOBILE

   ========================================================= */

@media (max-width: 767px) {

    .up-home-section {

        padding: 4.5rem 0;

    }

    .up-instagram-head {

        flex-direction: column;

        align-items: flex-start;

    }

    .up-instagram-placeholder {

        min-height: 360px;

    }

    .up-sponsor-card {

        min-height: 110px;

    }

    .up-kit-visual {

        min-height: 380px;

    }

    .up-kit-image {

        max-height: 420px;

    }

}

/* =========================================================

   HOME HERO

   ========================================================= */

.up-home-hero {

    position: relative;

    width: 100%;

    height: calc(100vh - 82px);

    min-height: 620px;

    max-height: 900px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: var(--up-navy-dark);

}

.up-home-hero-video {

    position: absolute;

    inset: 0;

    z-index: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

.up-home-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            90deg,

            rgba(8, 14, 24, 0.72) 0%,

            rgba(8, 14, 24, 0.42) 45%,

            rgba(8, 14, 24, 0.10) 100%

        );

}

.up-home-hero-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    align-items: center;

}

.up-home-hero-copy {

    width: 100%;

    max-width: 760px;

}

.up-home-hero-kicker {

    margin-bottom: 1.2rem;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

}

.up-home-hero-title {

    margin: 0 0 1.5rem;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.5rem, 7vw, 7rem);

    font-weight: 800;

    line-height: 0.94;

    letter-spacing: -0.06em;

}

.up-home-hero-text {

    max-width: 520px;

    margin-bottom: 2rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.15rem;

}

@media (max-width: 767px) {

    .up-home-hero {

        height: calc(100svh - 72px);

        min-height: 560px;

        max-height: none;

    }

    .up-home-hero-content {

        align-items: flex-end;

        padding-bottom: 4rem;

    }

    .up-home-hero-overlay {

        background:

            linear-gradient(

                0deg,

                rgba(8, 14, 24, 0.85) 0%,

                rgba(8, 14, 24, 0.35) 65%,

                rgba(8, 14, 24, 0.18) 100%

            );

    }

    .up-home-hero-title {

        font-size: clamp(3rem, 15vw, 4.8rem);

    }

    .up-home-hero-text {

        font-size: 1rem;

    }

}

@media (max-width: 576px) {
    .up-brand-logo {
        height: 36px;
    }
}
/* =========================================================
   EVENT ÜBERSICHT
   ========================================================= */

.up-event-card {
    position: relative;

    height: 340px;

    overflow: hidden;

    border-radius: var(--up-radius-lg);

    background: var(--up-navy-dark);

    box-shadow: var(--up-shadow);
}


/* BILD */

.up-event-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 350ms ease;
}


/* OVERLAY */

.up-event-card-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 14, 24, 0.08) 0%,
            rgba(8, 14, 24, 0.22) 35%,
            rgba(8, 14, 24, 0.88) 100%
        );

    z-index: 1;
}


/* INHALT */

.up-event-card-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 1.5rem;
}


/* OBERER BEREICH */

.up-event-card-top {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
}


/* EVENT-TYP */

.up-event-type {
    display: inline-flex;

    align-items: center;

    padding: 0.42rem 0.8rem;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.92);

    color:
        var(--up-navy-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


/* VEREINSWUNSCH */

.up-event-wunsch {
    display: inline-flex;

    align-items: center;

    padding: 0.42rem 0.8rem;

    border-radius: 999px;

    background:
        var(--up-navy);

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* UNTERER BEREICH */

.up-event-card-bottom {
    max-width: 760px;
}


/* DATUM */

.up-event-date {
    margin-bottom: 0.4rem;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 0.9rem;
    font-weight: 600;
}


/* TITEL */

.up-event-title {
    margin-bottom: 0.6rem;

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.6rem
        );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.04em;
}


/* BESCHREIBUNG */

.up-event-description {
    max-width: 620px;

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 1rem;

    line-height: 1.5;
}


/* BUTTON */

.up-event-button {
    margin-top: 1.25rem;
}


/* HOVER */

.up-event-card:hover
.up-event-card-image {
    transform:
        scale(1.025);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .up-event-card {
        height: 280px;
    }

    .up-event-card-content {
        padding: 1.2rem;
    }

    .up-event-type,
    .up-event-wunsch {
        font-size: 0.65rem;
        padding: 0.35rem 0.7rem;
    }

    .up-event-title {
        font-size: 1.65rem;
    }

    .up-event-description {
        font-size: 0.92rem;
    }

}
/* =========================================================
   EVENT DETAIL
   ========================================================= */

.up-event-detail-hero {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: var(--up-navy-dark);
}


/* BILD */

.up-event-detail-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* OVERLAY */

.up-event-detail-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(8, 14, 24, 0.25) 0%,
            rgba(8, 14, 24, 0.45) 40%,
            rgba(8, 14, 24, 0.92) 100%
        );
}


/* INHALT */

.up-event-detail-hero-content {
    position: relative;

    z-index: 2;

    min-height: 500px;

    display: flex;
    flex-direction: column;

    padding-top: 2rem;
    padding-bottom: 3.5rem;
}


/* ZURÜCK */

.up-event-detail-back {
    display: inline-flex;
    width: max-content;

    margin-bottom: 2rem;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none;
}
.up-event-detail-back:hover {
    color: #ffffff;
}


/* TEXTBEREICH */

.up-event-detail-copy {
    margin-top: auto;

    max-width: 900px;
}


/* META */

.up-event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.8rem;

    margin-bottom: 1.25rem;
}

.up-event-detail-date {
    color: rgba(255, 255, 255, 0.78);

    font-size: 0.95rem;
    font-weight: 600;
}


/* TITEL */

.up-event-detail-title {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(
            2.8rem,
            6vw,
            5.6rem
        );

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/* BESCHREIBUNG */

.up-event-detail-description {
    max-width: 720px;

    margin-top: 1.5rem;
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.08rem;
    line-height: 1.65;
}


/* ADMIN-AKTIONEN */

.up-event-detail-admin {
    display: flex;
    flex-wrap: wrap;

    gap: 0.65rem;

    margin-top: 2rem;
}


/* HAUPTINHALT */

.up-event-detail-content {
    padding: 2rem 0 6rem;
    background: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .up-event-detail-hero,
    .up-event-detail-hero-content {
        min-height: 440px;
    }

    .up-event-detail-hero-content {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .up-event-detail-title {
        font-size: 2.7rem;
    }

    .up-event-detail-description {
        font-size: 1rem;
    }

    .up-event-detail-content {
        padding: 3.5rem 0 4.5rem;
    }

}
.up-event-detail-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-bottom: 2.5rem;
}

.up-event-tool {
    display: inline-flex;
    align-items: center;

    padding: 0.38rem 0.7rem;

    border: 1px solid var(--up-border);
    border-radius: 999px;

    background: #ffffff;

    color: var(--up-muted);

    font-size: 0.78rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color var(--up-transition),
        border-color var(--up-transition),
        background var(--up-transition);
}

.up-event-tool:hover {
    color: var(--up-navy);
    border-color: var(--up-navy);
    background: var(--up-bg-soft);
}

.up-event-tool-danger:hover {
    color: #b42318;
    border-color: #b42318;
}
.up-verein-intro-wrap {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 4rem;

    text-align: center;
}

.up-verein-intro {
    max-width: 950px;

    margin: 1.75rem auto 0;

    color: var(--up-text);

    font-size: 1.2rem;
    line-height: 1.75;

    font-weight: 400;
}
@media (min-width: 992px) {

    .up-verein-intro-wrap {
        margin-bottom: 5rem;
    }

    .up-verein-intro {
        font-size: 1.35rem;
        line-height: 1.75;
    }

}
@media (max-width: 767px) {

    .up-verein-intro-wrap {
        margin-bottom: 3rem;
    }

    .up-verein-intro {
        font-size: 1.05rem;

        line-height: 1.7;
    }

}
.up-join-card {
    max-width: 680px;

    margin: 4rem auto 1rem;

    padding: 2.2rem 2.4rem;

    background: #ffffff;

    border: 1px solid var(--up-border);
    border-radius: 10px;

    box-shadow:
        0 10px 28px rgba(15, 17, 20, 0.07);

    transform: rotate(-0.4deg);
}

.up-join-card-kicker {
    margin-bottom: 0.8rem;

    color: var(--up-muted);

    font-family: "Manrope", sans-serif;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.up-join-card-text {
    margin: 0 0 1.2rem;

    color: var(--up-black);

    font-family: "Manrope", sans-serif;

    font-size: 1.35rem;
    font-weight: 600;

    line-height: 1.45;

    letter-spacing: -0.02em;
}

.up-join-card-link {
    color: var(--up-navy);

    font-family: "Manrope", sans-serif;

    font-size: 0.9rem;
    font-weight: 800;

    text-decoration: none;
}

.up-join-card-link:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {

    .up-join-card {
        margin-top: 3rem;

        padding: 1.7rem 1.5rem;

        transform: none;
    }

    .up-join-card-text {
        font-size: 1.15rem;
    }
}
/* =========================================================
   BLOG ARCHIV
   ========================================================= */

.up-blog-archive {
    max-width: 900px;
    margin: 1rem auto 0;

    border-top: 1px solid var(--up-border);
    border-bottom: 1px solid var(--up-border);
}

.up-blog-archive-toggle {
    width: 100%;

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

    padding: 1.1rem 0;

    border: 0;
    background: transparent;

    color: var(--up-black);

    font-family: "Manrope", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    text-align: left;
}

.up-blog-archive-chevron {
    color: var(--up-muted);

    transition:
        transform var(--up-transition);
}

.up-blog-archive-toggle[aria-expanded="true"]
.up-blog-archive-chevron {
    transform: rotate(180deg);
}


/* PANEL */

.up-blog-archive-panel {
    padding:
        0.25rem
        0
        1rem;
}


/* SUCHE */

.up-blog-search-wrap {
    padding-bottom: 0.75rem;
}

.up-blog-search {
    width: 100%;

    padding:
        0.7rem
        0.9rem;

    border:
        1px solid
        var(--up-border);

    border-radius:
        var(--up-radius-sm);

    background:
        var(--up-bg-soft);

    color:
        var(--up-text);

    font-size:
        0.9rem;

    outline:
        none;
}

.up-blog-search:focus {
    border-color:
        var(--up-navy);

    background:
        #ffffff;
}


/* LISTE */

.up-blog-list {
    max-height: 310px;

    overflow-y: auto;

    overscroll-behavior: contain;
}

.up-blog-list-item {
    display: flex;

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

    gap: 1.5rem;

    padding:
        0.85rem
        0.25rem;

    border-bottom:
        1px solid
        var(--up-border);

    color:
        var(--up-text);

    text-decoration:
        none;

    transition:
        color var(--up-transition),
        padding-left var(--up-transition);
}

.up-blog-list-item:last-child {
    border-bottom: 0;
}

.up-blog-list-item:hover {
    color:
        var(--up-navy);

    padding-left:
        0.5rem;
}

.up-blog-list-title {
    font-weight: 600;
}

.up-blog-list-date {
    flex-shrink: 0;

    color:
        var(--up-muted);

    font-size:
        0.78rem;
}

.up-blog-empty {
    padding:
        1rem 0;

    color:
        var(--up-muted);

    font-size:
        0.85rem;
}


/* MOBILE */

@media (max-width: 576px) {

    .up-blog-list {
        max-height: 260px;
    }

    .up-blog-list-item {
        align-items: flex-start;

        gap: 1rem;
    }

    .up-blog-list-date {
        font-size: 0.7rem;
    }

}
.up-blog-admin {
    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 3rem;
    padding-top: 1rem;

    border-top:
        1px solid
        var(--up-border);
}

.up-blog-admin form {
    margin: 0;
}

.up-blog-admin-link {
    padding: 0;

    border: 0;
    background: transparent;

    color:
        var(--up-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;
}

.up-blog-admin-link:hover {
    color:
        var(--up-navy);
}

.up-blog-admin-delete:hover {
    color:
        #b42318;
}