/* =========================================================
           2. GESAMTE SEITE
           Zentriert das virtuelle Handy
        ========================================================== */

        body {

            margin: 0;

            background: #ffffff;

            display: flex;

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

            height: 100vh;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

        }


        /* =========================================================
           3. HANDY
           Der schwarze Rahmen der App
        ========================================================== */

        .phone {

            width: 390px;
            height: 844px;

            background: black;

            border: 12px solid #111;

            border-radius: 45px;

            overflow: hidden;

            position: relative;

            box-shadow:
                0 25px 60px rgba(0, 0, 0, .35);

        }


        /* =========================================================
           4. DYNAMIC ISLAND
           Schwarze Kamera-Aussparung
        ========================================================== */

        .notch {

            position: absolute;

            width: 130px;
            height: 30px;

            top: 12px;
            left: 50%;

            transform: translateX(-50%);

            background: black;

            border-radius: 20px;

            z-index: 200;

        }


        /* =========================================================
           5. ALLGEMEINE VIDEOS
        ========================================================== */

        video {

            position: absolute;

            width: 100%;
            height: 100%;

            object-fit: cover;

        }


        /* =========================================================
           6. STARTSEITE
           Logo, Slogan und Login/Sign-Up
        ========================================================== */

        .content {

            position: absolute;

            width: 100%;
            height: 100%;

            display: flex;

            flex-direction: column;

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

            color: white;

            z-index: 10;

        }


        /* Logo */

        .logo img {

            width: 275px;

            max-width: none;

            display: block;

        }


        /* Slogan */

        .slogan {

            margin-top: 10px;

            font-size: 22px;

            opacity: .9;

        }


        /* =========================================================
           7. STARTSEITEN-BUTTONS
        ========================================================== */

        .buttons {

            margin-top: 70px;

            width: 85%;

        }


        button {

            cursor: pointer;

        }


        .buttons button {

            width: 100%;
            height: 65px;

            font-size: 32px;

            border-radius: 8px;

            margin-bottom: 20px;

        }


        /* Sign Up */

        .signup {

            background: #21d4bd;

            border: none;

            color: white;

        }


        /* Login */

        .login {

            background: transparent;

            border: 3px solid white;

            color: white;

        }


        /* =========================================================
           8. DATENSCHUTZTEXT
        ========================================================== */

        .footer {

            width: 85%;

            text-align: center;

            font-size: 18px;

            line-height: 28px;

            margin-top: 15px;

        }


        /* =========================================================
           9. SIGN-UP-SCREEN
           Wird beim Klick auf "sign up" geöffnet
        ========================================================== */

        .signup-screen {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background: white;

            z-index: 100;

            display: none;

        }


        /* X zum Schließen */

        .close {

            position: absolute;

            top: 25px;
            left: 25px;

            font-size: 35px;

            color: #333;

            cursor: pointer;

        }


        /* Sign-Up-Inhalt */

        .signup-content {

            height: 100%;

            display: flex;

            flex-direction: column;

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

        }


        /* Eingabefelder */

        .signup-content input {

            width: 75%;
            height: 55px;

            margin: 10px;

            border: none;

            border-bottom:
                2px solid #ccc;

            font-size: 20px;

            padding-left: 10px;

            outline: none;

        }


        /* Create Account */

        .create-account {

            margin-top: 40px;

            width: 80%;
            height: 60px;

            background: #21d4bd;

            border: none;

            color: white;

            font-size: 25px;

            border-radius: 8px;

        }


        /* =========================================================
           10. SPLASH SCREEN
           Wird beim Start angezeigt
        ========================================================== */

        .splash-screen {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background: black;

            display: flex;

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

            z-index: 300;

            transition:
                opacity .8s ease;

        }


        .splash-screen img {

            width: 250px;

            animation:
                logoFade 1.5s ease;

        }


        /* Splash-Animation */

        @keyframes logoFade {

            from {

                opacity: 0;

                transform:
                    scale(.9);

            }

            to {

                opacity: 1;

                transform:
                    scale(1);

            }

        }


        /* =========================================================
           11. FOR YOU PAGE
           Wird nach "log in" geöffnet
        ========================================================== */

        .foryou-screen {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background: black;

            z-index: 60;

            display: none;

            overflow: hidden;

        }


        /* =========================================================
           12. FOR YOU VIDEO
        ========================================================== */

        .foryou-video {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;

        }


        /* =========================================================
           13. DUNKLER VERLAUF
           Macht Texte unten besser lesbar
        ========================================================== */

        .foryou-gradient {

            position: absolute;

            left: 0;
            bottom: 0;

            width: 100%;
            height: 45%;

            background:
                linear-gradient(
                    transparent,
                    rgba(0, 0, 0, .8)
                );

            pointer-events: none;

        }


        /* =========================================================
           14. FOR YOU TOPBAR
           Following / Featured
        ========================================================== */

        .foryou-topbar {

            position: absolute;

            top: 45px;
            left: 0;

            width: 100%;

            display: flex;

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

            gap: 25px;

            color: white;

            z-index: 5;

            font-size: 18px;

        }


        .foryou-tab {

            padding-bottom: 8px;

        }


        .foryou-tab.inactive {

            opacity: .6;

        }


        .foryou-tab.active-tab {

            font-weight: bold;

            border-bottom:
                2px solid white;

        }


        /* =========================================================
           15. VIDEO-INFORMATIONEN
           Username, Beschreibung und Sound
        ========================================================== */

        .foryou-info {

            position: absolute;

            left: 18px;
            bottom: 85px;

            width: 70%;

            color: white;

            z-index: 4;

            text-shadow:
                0 1px 3px rgba(0, 0, 0, .7);

        }


        .foryou-username {

            font-size: 20px;

            font-weight: bold;

            margin-bottom: 8px;

        }


        .foryou-description {

            font-size: 16px;

            line-height: 23px;

            margin-bottom: 8px;

        }


        /* =========================================================
           16. SOUND-TICKER
           Original Sound läuft von rechts nach links
        ========================================================== */

        .foryou-sound {

            width: 100%;

            overflow: hidden;

            white-space: nowrap;

            color: white;

            opacity: .75;

            font-size: 14px;

        }


        .sound-marquee {

            display: flex;

            width: max-content;

            animation:
                soundMarquee 8s linear infinite;

        }


        .sound-marquee span {

            flex-shrink: 0;

        }


        @keyframes soundMarquee {

            from {

                transform:
                    translateX(0);

            }

            to {

                transform:
                    translateX(-50%);

            }

        }


        /* =========================================================
           17. SOUND-COVER
           Drehendes Cover rechts unten
        ========================================================== */

        .sound-cover {

            position: absolute;

            right: 15px;
            bottom: 90px;

            width: 48px;
            height: 48px;

            border-radius: 50%;

            overflow: hidden;

            z-index: 6;

            animation:
                soundRotate 4s linear infinite;

        }


        .sound-cover img {

            width: 100%;
            height: 100%;

            object-fit: cover;

        }


        @keyframes soundRotate {

            from {

                transform:
                    rotate(0deg);

            }

            to {

                transform:
                    rotate(360deg);

            }

        }


        /* =========================================================
           18. AKTIONEN RECHTS
           Profil, Like, Kommentare und Teilen
        ========================================================== */

        .foryou-actions {

            position: absolute;

            right: 12px;
            bottom: 155px;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 18px;

            z-index: 7;

        }


        /* Profilbild */

        .foryou-profile {

            position: relative;

            width: 52px;
            height: 52px;

        }


        .foryou-profile img {

            width: 52px;
            height: 52px;

            object-fit: cover;

            border-radius: 50%;

            border:
                2px solid white;

        }


        /* Plus */

        .foryou-profile span {

            position: absolute;

            right: -4px;
            bottom: -7px;

            width: 20px;
            height: 20px;

            display: flex;

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

            background: #21d4bd;

            color: white;

            border-radius: 50%;

            font-size: 16px;

        }


        /* Allgemeine Aktionsbuttons */

        .foryou-action {

            width: auto;
            height: auto;

            margin: 0;

            padding: 0;

            background: transparent;

            border: none;

            color: white;

            display: flex;

            flex-direction: column;

            align-items: center;

            cursor: pointer;

            text-shadow:
                0 1px 3px rgba(0, 0, 0, .7);

        }


        /* Aktionsbilder */

        .foryou-action img {

            width: 52px;
            height: 52px;

            object-fit: contain;

            display: block;

        }


        .foryou-action small {

            font-size: 12px;

            margin-top: 3px;

        }


        /* =========================================================
           19. FOR YOU UNTERE NAVIGATION
           Home / Search / Create / Inbox / Me
        ========================================================== */

        .foryou-bottom-nav {

            position: absolute;

            left: 0;
            bottom: 0;

            width: 100%;
            height: 65px;

            display: flex;

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

            background: transparent;

            border-top:
                1px solid rgba(200, 200, 200, .65);

            z-index: 8;

        }


        /* Navigationsbuttons */

        .nav-item {

            width: 55px;
            height: 55px;

            margin: 0;
            padding: 0;

            background: transparent;

            border: none;

            color: white;

            display: flex;

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

        }


        .nav-item img {

            width: 27px;
            height: 27px;

            object-fit: contain;

            display: block;

        }


        /* Texte unter den Icons ausblenden */

        .nav-item small {

            display: none;

        }


        /* =========================================================
			20. CREATE-BUTTON
			Zentraler Plus-Button
			========================================================== */

			.nav-create {

				width: 55px;
				height: 38px;

				margin: 0;
				padding: 0;

				background: linear-gradient(#FF0F50, orange);

				border: none;

				border-radius: 8px;

				color: white;

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

				font-size: 30px;

			}


        /* =========================================================
           21. PROFILSEITE
           WICHTIG:
           Diese Seite ist NICHT innerhalb von .foryou-screen
        ========================================================== */

        .profile-screen {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background:
                linear-gradient(
                    180deg,
                    #ff0751 0%,
                    #ff3155 35%,
                    #ff8140 70%,
                    #ffd21c 100%
                );

            z-index: 70;

            display: none;

            overflow: hidden;

            color: white;

        }


        /* =========================================================
           22. PROFIL HEADER
           Name + linkes/rechtes Icon
        ========================================================== */

        .profile-header {

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 120px;

            display: flex;

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

            font-size: 20px;

        }


        .profile-header-left {

            position: absolute;

            left: 18px;

            font-size: 25px;

        }


        .profile-header-right {

            position: absolute;

            right: 18px;

            font-size: 25px;

        }


        /* =========================================================
           23. PROFILBILD
        ========================================================== */

        .profile-picture {

            position: absolute;

            top: 105px;
            left: 50%;

            transform:
                translateX(-50%);

            width: 100px;
            height: 100px;

            border-radius: 50%;

            border:
                2px solid white;

            overflow: hidden;

        }


        .profile-picture img {

            width: 100%;
            height: 100%;

            object-fit: cover;

        }


        /* =========================================================
           24. PROFIL-USERNAME
        ========================================================== */

        .profile-username {

            position: absolute;

            top: 220px;

            width: 100%;

            text-align: center;

            font-size: 17px;

            font-weight: bold;

        }


        /* =========================================================
           25. BIO
        ========================================================== */

        .profile-bio {

            position: absolute;

            top: 250px;

            width: 100%;

            text-align: center;

            font-size: 16px;

            line-height: 20px;

        }


        /* =========================================================
           26. FOLLOWING / FANS / LIKES
        ========================================================== */

        .profile-stats {

            position: absolute;

            top: 300px;

            left: 0;

            width: 100%;

            display: flex;

            justify-content: space-around;

            text-align: center;

        }


        .profile-stat {

            display: flex;

            flex-direction: column;

            align-items: center;

        }


        .profile-stat-number {

            font-size: 15px;

            font-weight: bold;

            margin-bottom: 5px;

        }


        .profile-stat-label {

            font-size: 15px;

        }


        /* =========================================================
           27. EDIT PROFILE BUTTON
        ========================================================== */

        .edit-profile {

            position: absolute;

            top: 355px;
            left: 50%;

            transform:
                translateX(-50%);

            width: 125px;
            height: 42px;

            background: transparent;

            border:
                2px solid white;

            border-radius: 25px;

            color: white;

            font-size: 18px;

        }


        /* =========================================================
           28. LEERES PROFIL
        ========================================================== */

        .no-musically {

            position: absolute;

            top: 560px;

            width: 100%;

            text-align: center;

            font-size: 11px;

            opacity: .9;

        }


        /* =========================================================
   PROFIL - MUSICAL.LY VIDEO GRID
========================================================= */

.profile-videos {
    position: absolute;

    top: 415px;
    left: 0;
    bottom: 65px;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows:
        150px;

    gap: 1px;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
}


/* =========================================================
   EIN VIDEO IM PROFIL
========================================================= */

.profile-video-item {
    position: relative;

    width: 100%;
    height: 150px;

    display: block;

    object-fit: cover;

    cursor: pointer;
}


/* =========================================================
   KEINE MUSICAL.LYS
========================================================= */

.profile-videos .no-musically {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    transform:
        translateY(-50%);

    text-align: center;
}


        /* =========================================================
           29. PROFIL-NAVIGATION
        ========================================================== */

        .profile-bottom-nav {

            position: absolute;

            left: 0;
            bottom: 0;

            width: 100%;
            height: 65px;

            display: flex;

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

            background:
                #404040;

            border-top:
                1px solid rgba(200, 200, 200, .65);

            z-index: 10;

        }


        .profile-nav-item {

            width: 55px;
            height: 55px;

            margin: 0;
            padding: 0;

            background: transparent;

            border: none;

            display: flex;

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

        }


        .profile-nav-item img {

            width: 27px;
            height: 27px;

            object-fit: contain;

        }


        .profile-nav-item.active-profile img {

            width: 30px;
            height: 30px;

        }
		
		
		/* =========================================================
			PROFIL - PLUS BUTTON
			Sieht genauso aus wie der Plus-Button im For-You-Bereich
			========================================================= */

			.profile-nav-create {

				width: 55px;
				height: 38px;

				margin: 0;
				padding: 0;

				background:
					linear-gradient(
						#FF0F50,
						orange
				);

				border: none;

				border-radius: 8px;

				color: white;

				display: flex;

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

				font-size: 30px;

				cursor: pointer;

			}


      /* =========================================================
   30. PROFIL BEARBEITEN
   ========================================================= */

.edit-profile-screen {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: white;

    z-index: 110;

    display: none;

    overflow: hidden;

    color: #333;

}


/* =========================================================
   OBERER VERLAUFSBEREICH
   ========================================================= */

.edit-profile-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 75px;

    background:
        linear-gradient(
            90deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}


/* =========================================================
   X – SCHLIESSEN
   ========================================================= */

.edit-profile-close {

    position: absolute;

    left: 18px;
    top: 18px;

    width: 40px;
    height: 40px;

    padding: 0;

    background: transparent;

    border: none;

    color: white;

    font-size: 30px;

    line-height: 40px;

}


/* =========================================================
   TITEL
   ========================================================= */

.edit-profile-title {

    position: relative;

    top: 17px;

    font-size: 20px;

    font-weight: bold;

}

/* =========================================================
   FERTIG
   ========================================================= */

.edit-profile-done {

    position: absolute;

    right: 15px;
    top: 18px;

    height: 40px;

    padding: 0 5px;

    background: transparent;

    border: none;

    color: white;

    font-size: 19px;

    font-weight: bold;

}


/* =========================================================
   INHALT
   ========================================================= */

.edit-profile-content {

    position: absolute;

    top: 75px;
    left: 0;

    width: 100%;
    height: calc(100% - 75px);

    overflow-y: auto;

    background: white;

    box-sizing: border-box;

    padding-top: 28px;

}


/* =========================================================
   PROFILBILD
   ========================================================= */

.edit-profile-picture {

    position: relative;

    width: 120px;
    height: 120px;

    margin: 0 auto 35px auto;

}


/* Bild */

.edit-profile-picture img {

    width: 120px;
    height: 120px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #ddd;

    display: block;

}


/* =========================================================
   KAMERA-BUTTON
   ========================================================= */

.change-profile-picture {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 2px solid white;

    border-radius: 50%;

    background: #ff3155;

    color: white;

    font-size: 18px;

    display: flex;

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

}


/* =========================================================
   EINGABEFELDER
   ========================================================= */

.edit-profile-field {

    width: 82%;

    margin: 0 auto 24px auto;

}


/* Beschriftung */

.edit-profile-field label {

    display: block;

    margin-bottom: 7px;

    color: #aaa;

    font-size: 14px;

}


/* Name / Username */

.edit-profile-field input {

    width: 100%;

    height: 45px;

    padding: 0;

    box-sizing: border-box;

    border: none;

    border-bottom: 1px solid #ddd;

    outline: none;

    background: transparent;

    color: #333;

    font-size: 19px;

}


/* =========================================================
   BIO
   ========================================================= */

.edit-profile-field textarea {

    width: 100%;

    min-height: 80px;

    padding: 8px 0;

    box-sizing: border-box;

    border: none;

    border-bottom: 1px solid #ddd;

    outline: none;

    resize: none;

    background: transparent;

    color: #333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 19px;

    line-height: 25px;

}


/* =========================================================
   FOCUS
   ========================================================= */

.edit-profile-field input:focus,
.edit-profile-field textarea:focus {

    border-bottom:
        2px solid #ff3155;

}      


/* =========================================================
   30. SEARCH-SEITE
========================================================= */

.search-screen {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #f2f2f2;

    z-index: 70;

    display: none;

    overflow: hidden;

}


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

.search-header {

    padding-top: 48px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 16px;

    background:
        linear-gradient(
            135deg,
            #ff0751,
            #ff5a45,
            #ffd21c
        );

}


/* Suchleiste */

.search-bar {

    height: 42px;

    background: white;

    border-radius: 5px;

    display: flex;

    align-items: center;

    padding-left: 12px;
    padding-right: 12px;

}


/* Lupe */

.search-icon {

    font-size: 17px;

    margin-right: 8px;

}


/* Sucheingabe */

.search-bar input {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    font-size: 16px;

    color: #333;

}


/* =========================================================
   SEARCH INHALT
========================================================= */

.search-content {

    position: absolute;

    top: 106px;
    left: 0;
    bottom: 65px;

    width: 100%;

    overflow-y: auto;

}


/* Überschriften */

.search-section-title {

    padding:
        14px
        16px
        10px;

    font-size: 14px;

    color: #777;

    text-transform: lowercase;

}


/* =========================================================
   VIER FEATURE-KACHELN
========================================================= */

.search-feature-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    background: white;

    border-top:
        1px solid #e5e5e5;

    border-bottom:
        1px solid #e5e5e5;

}


.search-feature-card {

    height: 100px;

    margin: 0;

    border: none;

    background: white;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    font-size: 14px;

    color: #444;

}


.search-feature-card:nth-child(odd) {

    border-right:
        1px solid #e5e5e5;

}


.search-feature-card:nth-child(-n + 2) {

    border-bottom:
        1px solid #e5e5e5;

}


.search-feature-icon {

    font-size: 28px;

}


/* =========================================================
   TRENDING TAGS
========================================================= */

.trending-tags {

    width: 100%;

}


.trending-tag {

    width: 100%;
    height: 62px;

    margin: 0;

    padding-left: 22px;

    border: none;

    text-align: left;

    font-size: 22px;

    font-weight: bold;

    color: white;

}


/* 1. Hashtag */

.trending-tag:nth-child(1) {

    background:
        linear-gradient(
            90deg,
            #ffd21c,
            #ffb300
        );

}


/* 2. Hashtag */

.trending-tag:nth-child(2) {

    background:
        linear-gradient(
            90deg,
            #ff0751,
            #ff4f81
        );

}


/* 3. Hashtag */

.trending-tag:nth-child(3) {

    background:
        linear-gradient(
            90deg,
            #16c8d4,
            #00a8e8
        );

}

/* =========================================================
   SEARCH - USER ERGEBNISSE
========================================================= */

.search-results {
    width: 100%;
    background: white;
}

.search-user-result {
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
}

.search-user-image {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
    margin-right: 12px;
}

.search-user-info {
    min-width: 0;
}

.search-user-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.search-user-username {
    margin-top: 3px;
    font-size: 14px;
    color: #888;
}

.search-no-results {
    padding: 18px 16px;
    background: white;
    color: #888;
    font-size: 14px;
}


/* =========================================================
   FREMDES BENUTZERPROFIL
========================================================= */

.other-profile-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            #ff0751 0%,
            #ff3155 35%,
            #ff8140 70%,
            #ffd21c 100%
        );

    z-index: 80;

    display: none;
    overflow: hidden;

    color: white;
}


/* =========================================================
   ZURÜCK-PFEIL
========================================================= */

.other-profile-back {
    position: absolute;
    top: 42px;
    left: 18px;

    z-index: 2;

    border: none;
    background: transparent;

    color: white;

    font-size: 42px;
    line-height: 30px;

    cursor: pointer;
}


/* =========================================================
   NAME OBEN
========================================================= */

.other-profile-top-name {
    position: absolute;
    top: 42px;
    left: 60px;
    right: 60px;

    text-align: center;

    font-size: 20px;
    font-weight: 600;

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


/* =========================================================
   PROFILBILD
========================================================= */

.other-profile-image {
    position: absolute;
    top: 105px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 100px;
    height: 100px;

    border-radius: 50%;

    border:
        2px solid white;

    object-fit: cover;

    background:
        rgba(
            255,
            255,
            255,
            .15
        );
}


/* =========================================================
   USERNAME
========================================================= */

.other-profile-username {
    position: absolute;
    top: 220px;

    width: 100%;

    text-align: center;

    font-size: 17px;
    font-weight: bold;
}


/* =========================================================
   BIO
========================================================= */

.other-profile-bio {
    position: absolute;
    top: 250px;

    width: 100%;

    padding:
        0
        25px;

    box-sizing: border-box;

    text-align: center;

    font-size: 16px;
    line-height: 20px;
}


/* =========================================================
   FOLLOWING / FANS / LIKES
========================================================= */

.other-profile-stats {
    position: absolute;
    top: 300px;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: space-around;

    text-align: center;
}

.other-profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.other-profile-stat span {
    font-size: 15px;
    font-weight: bold;

    margin-bottom: 5px;
}

.other-profile-stat small {
    font-size: 15px;
}


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

.other-profile-follow {
    position: absolute;
    top: 355px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 125px;
    height: 42px;

    background: transparent;

    border:
        2px solid white;

    border-radius: 25px;

    color: white;

    font-size: 18px;

    cursor: pointer;
}


/* =========================================================
   VIDEO-BEREICH
========================================================= */

.other-profile-videos {
    position: absolute;

    top: 415px;
    left: 0;
    bottom: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows:
        150px;

    gap: 1px;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
}

.other-profile-videos .no-musically {
    top: 50%;
    transform: translateY(-50%);
}

/* =========================================================
   FREMDES PROFIL - KEINE VIDEOS
========================================================= */

.other-profile-videos .no-musically {
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   FANS / FOLLOWING LISTE
========================================================= */

.follow-list-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: white;

    z-index: 90;

    display: none;

    overflow: hidden;
}


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

.follow-list-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 180px;

    overflow: hidden;
}


.follow-list-header-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.follow-list-header-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(
            0,
            0,
            0,
            0.22
        );
}


.follow-list-back {
    position: absolute;
    top: 35px;
    left: 16px;

    z-index: 2;

    border: none;
    background: transparent;

    color: white;

    font-size: 42px;
    line-height: 32px;

    cursor: pointer;
}


.follow-list-title {
    position: absolute;
    top: 58px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 2;

    color: white;

    font-size: 26px;
    font-weight: bold;

    text-align: center;
}


/* =========================================================
   SCROLLBARE BENUTZERLISTE
========================================================= */

.follow-list-users {
    position: absolute;

    top: 180px;
    left: 0;
    bottom: 0;

    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    background: white;
}


/* =========================================================
   EIN BENUTZER
========================================================= */

.follow-list-user {
    width: 100%;
    min-height: 76px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding:
        10px
        18px;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    cursor: pointer;
}


.follow-list-user-image {
    width: 56px;
    height: 56px;

    flex-shrink: 0;

    border-radius: 50%;

    object-fit: cover;

    background:
        #eeeeee;
}


.follow-list-user-info {
    margin-left: 14px;

    min-width: 0;
}


.follow-list-user-name {
    color: #111111;

    font-size: 16px;
    font-weight: 600;

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


.follow-list-user-username {
    margin-top: 4px;

    color: #888888;

    font-size: 14px;

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


/* =========================================================
   LEERE LISTE
========================================================= */

.follow-list-empty {
    width: 100%;

    padding-top: 60px;

    text-align: center;

    color: #999999;

    font-size: 15px;
}


/* =========================================================
   CREATE MENÜ
========================================================= */

.create-menu-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 120;

    display: none;
}


/* =========================================================
   DUNKLER HINTERGRUND
========================================================= */

.create-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(
            0,
            0,
            0,
            0.62
        );
}


/* =========================================================
   WEISSES PANEL UNTEN
========================================================= */

.create-menu-panel {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 190px;

    display: flex;

    background: white;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );
}


/* =========================================================
   EINZELNE OPTION
========================================================= */

.create-menu-option {
    flex: 1;

    border: none;

    background: white;

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

    cursor: pointer;

    border-right:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );
}


.create-menu-option:last-child {
    border-right: none;
}


/* =========================================================
   ICON
========================================================= */

.create-menu-icon {
    width: 68px;
    height: 68px;

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

    margin-bottom: 16px;

    color: #111111;

    font-size: 46px;
    font-weight: bold;
}


/* =========================================================
   TEXT
========================================================= */

.create-menu-text {
    color: #111111;

    font-size: 20px;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   PICK MUSIC / SOUND AUSWAHL
========================================================= */

.sound-select-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: white;

    z-index: 130;

    display: none;

    overflow: hidden;
}


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

.sound-select-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 95px;

    background: white;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    z-index: 2;
}

.sound-select-back {
    position: absolute;
    left: 16px;
    top: 38px;

    border: none;
    background: transparent;

    color: #111111;

    font-size: 40px;
    line-height: 30px;

    cursor: pointer;
}

.sound-select-title {
    position: absolute;

    top: 48px;
    left: 50%;

    transform: translateX(-50%);

    color: #111111;

    font-size: 20px;
    font-weight: 600;
}


/* =========================================================
   SOUND LISTE
========================================================= */

.sound-select-list {
    position: absolute;

    top: 95px;
    left: 0;
    bottom: 76px;

    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    background: white;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   EIN SOUND
========================================================= */

.sound-select-item {
    width: 100%;
    min-height: 78px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 11px 16px;

    border: none;
    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    background: white;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   SOUND COVER
========================================================= */

.sound-select-cover {
    width: 56px;
    height: 56px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 4px;

    background: #eeeeee;
}


/* =========================================================
   SOUND INFOS
========================================================= */

.sound-select-info {
    flex: 1;

    min-width: 0;

    margin-left: 14px;
}

.sound-select-name {
    color: #111111;

    font-size: 16px;
    font-weight: 600;

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

.sound-select-artist {
    margin-top: 5px;

    color: #888888;

    font-size: 13px;

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


/* =========================================================
   PLAY ICON
========================================================= */

.sound-select-play {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    color: #aaaaaa;

    font-size: 22px;
}


/* =========================================================
   AUSGEWÄHLTER SOUND
========================================================= */

.sound-select-item.selected {
    background: #f7f7f7;
}

.sound-select-item.selected .sound-select-play {
    color: #e72c83;
}


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

.sound-select-next {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 14px;

    height: 50px;

    border: none;
    border-radius: 4px;

    background:
    linear-gradient(
        90deg,
        #ff0751 0%,
        #ff3155 40%,
        #ff8140 75%,
        #ffd21c 100%
    );

    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    display: none;
}


/* =========================================================
   VIDEO AUFNAHME
========================================================= */

.record-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #111111;

    z-index: 140;

    display: none;

    overflow: hidden;
}


/* =========================================================
   KAMERA
========================================================= */

.record-camera {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #111111;
}


/* =========================================================
   DUNKLER VERLAUF UNTEN
========================================================= */

.record-bottom-gradient {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 42%;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.72)
        );

    pointer-events: none;
}


/* =========================================================
   ZURÜCK BUTTON
========================================================= */

.record-back {
    position: absolute;
    top: 35px;
    left: 16px;

    width: 45px;
    height: 45px;

    padding: 0;

    border: none;
    background: transparent;

    color: white;

    font-size: 42px;
    line-height: 40px;

    z-index: 5;

    cursor: pointer;

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.6);
}


/* =========================================================
   SOUND NAME OBEN
========================================================= */

.record-sound-name {
    position: absolute;

    top: 46px;
    left: 50%;

    max-width: 220px;

    transform:
        translateX(-50%);

    color: white;

    font-size: 15px;
    font-weight: 600;

    text-align: center;

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

    z-index: 5;

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.6);
}


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

.record-timer-button {
    position: absolute;

    top: 38px;
    right: 18px;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.35);

    color: white;

    font-size: 22px;

    z-index: 6;

    cursor: pointer;
}


/* =========================================================
   TIMER MENÜ
========================================================= */

.record-timer-menu {
    position: absolute;

    top: 92px;
    right: 14px;

    padding: 6px;

    display: none;

    background:
        rgba(20, 20, 20, 0.82);

    border-radius: 6px;

    z-index: 7;
}

.record-timer-option {
    width: 54px;
    height: 38px;

    display: block;

    border: none;

    background: transparent;

    color: white;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.record-timer-option:hover {
    background:
        rgba(255, 255, 255, 0.12);
}


/* =========================================================
   COUNTDOWN
========================================================= */

.record-countdown {
    position: absolute;

    top: 50%;
    left: 50%;

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

    color: white;

    font-size: 100px;
    font-weight: bold;

    z-index: 10;

    display: none;

    text-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.7);
}


/* =========================================================
   SPEED BAR
========================================================= */

.record-speed-bar {
    position: absolute;

    left: 50%;
    bottom: 130px;

    transform:
        translateX(-50%);

    display: flex;

    background:
        rgba(0, 0, 0, 0.38);

    border-radius: 5px;

    overflow: hidden;

    z-index: 5;
}

.record-speed-button {
    min-width: 76px;
    height: 36px;

    padding: 0 12px;

    border: none;

    background: transparent;

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

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.record-speed-button.active {
    background: white;

    color: #ff3155;
}


/* =========================================================
   GROSSER AUFNAHME BUTTON
========================================================= */

.record-main-button {
    position: absolute;

    left: 50%;
    bottom: 38px;

    width: 74px;
    height: 74px;

    transform:
        translateX(-50%);

    padding: 0;

    border:
        4px solid white;

    border-radius: 50%;

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

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

    z-index: 6;

    cursor: pointer;
}

.record-main-inner {
    width: 58px;
    height: 58px;

    display: block;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );
}


/* =========================================================
   AUFNAHME LÄUFT
   Wird später per JavaScript gesetzt
========================================================= */

.record-main-button.recording
.record-main-inner {
    width: 34px;
    height: 34px;

    border-radius: 5px;
}


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

.record-next-button {
    position: absolute;

    right: 18px;
    bottom: 47px;

    min-width: 92px;
    height: 48px;

    padding: 0 20px;

    border: none;
    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );

    color: white;

    font-size: 16px;
    font-weight: bold;

    z-index: 7;

    cursor: pointer;

    display: none;
}

/* =========================================================
   VIDEO VORSCHAU / POST
========================================================= */

.post-screen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #111111;

    z-index: 150;

    display: none;

    overflow: hidden;
}


/* =========================================================
   VIDEO
========================================================= */

.post-video {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #111111;
}


/* =========================================================
   DUNKLER VERLAUF UNTEN
========================================================= */

.post-bottom-gradient {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 48%;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.78)
        );

    pointer-events: none;
}


/* =========================================================
   ZURÜCK
========================================================= */

.post-back {
    position: absolute;
    top: 35px;
    left: 16px;

    width: 45px;
    height: 45px;

    padding: 0;

    border: none;
    background: transparent;

    color: white;

    font-size: 42px;
    line-height: 40px;

    z-index: 5;

    cursor: pointer;

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.6);
}


/* =========================================================
   SOUND NAME
========================================================= */

.post-sound-name {
    position: absolute;

    top: 46px;
    left: 50%;

    max-width: 210px;

    transform:
        translateX(-50%);

    color: white;

    font-size: 15px;
    font-weight: 600;

    text-align: center;

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

    z-index: 5;

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.6);
}


/* =========================================================
   SOUND COVER
========================================================= */

.post-sound-cover {
    position: absolute;

    top: 36px;
    right: 18px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    object-fit: cover;

    border:
        2px solid white;

    z-index: 5;

    background: #333333;
}


/* =========================================================
   CAPTION
========================================================= */

.post-caption-area {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 118px;

    z-index: 6;
}

.post-caption-input {
    width: 100%;
    min-height: 82px;

    box-sizing: border-box;

    padding: 12px 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.38);

    color: white;

    font-size: 15px;

    resize: none;

    outline: none;
}

.post-caption-input::placeholder {
    color:
        rgba(255, 255, 255, 0.65);
}


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

.post-submit-button {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 38px;

    height: 52px;

    border: none;
    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );

    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    z-index: 6;
}


/* =====================================================
   FROM LIBRARY
===================================================== */

.library-screen {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #ffffff;
    overflow: hidden;
}


/* ZURÜCK */

.library-back {
    position: absolute;
    top: 24px;
    left: 18px;

    z-index: 3;

    border: none;
    background: transparent;

    font-size: 38px;
    font-weight: 300;

    color: #222222;

    cursor: pointer;
}


/* TITEL */

.library-title {
    position: absolute;
    top: 34px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 16px;
    font-weight: 600;

    color: #222222;

    white-space: nowrap;
}


/* VIDEO AUSWÄHLEN */

.library-select-button {
    position: absolute;
    left: 50%;
    top: 50%;

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

    width: 210px;
    height: 48px;

    border: none;
    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   FROM LIBRARY - VIDEO VORSCHAU
===================================================== */

.library-video-preview {
    display: none;

    position: absolute;
    top: 95px;
    left: 20px;

    width: calc(100% - 40px);
    height: 430px;

    object-fit: contain;

    background: #000000;

    border-radius: 14px;
}


/* =====================================================
   FROM LIBRARY - NEXT
===================================================== */

.library-next-button {
    display: none;

    position: absolute;
    left: 50%;
    bottom: 32px;

    transform: translateX(-50%);

    width: 210px;
    height: 48px;

    border: none;
    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            #ff0751 0%,
            #ff3155 40%,
            #ff8140 75%,
            #ffd21c 100%
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   FROM LIBRARY - SOUND AUSWAHL
===================================================== */

.library-sound-screen {
    display: none;

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 210;

    background: #ffffff;

    overflow: hidden;
}


/* ZURÜCK */

.library-sound-back {
    position: absolute;

    top: 24px;
    left: 18px;

    border: none;
    background: transparent;

    color: #111111;

    font-size: 42px;
    line-height: 40px;

    z-index: 3;
}


/* TITEL */

.library-sound-title {
    position: absolute;

    top: 36px;
    left: 0;

    width: 100%;

    text-align: center;

    color: #111111;

    font-size: 20px;
    font-weight: 600;
}


/* SOUND OPTIONEN */

.library-sound-option {
    position: relative;

    width: calc(100% - 36px);
    height: 72px;

    margin-left: 18px;

    border: none;
    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    background: white;

    display: flex;

    align-items: center;

    text-align: left;

    color: #111111;

    font-size: 17px;
}


/* ERSTE OPTION */

#libraryOriginalSoundButton {
    margin-top: 110px;
}


/* ICON */

.library-sound-option-icon {
    width: 45px;

    font-size: 27px;

    text-align: center;
}


/* TEXT */

.library-sound-option-text {
    margin-left: 12px;

    font-size: 17px;
    font-weight: 500;
}


/* =========================================================
   PROFIL VIDEO FEED
========================================================= */

.profile-feed-screen {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: black;

    z-index: 220;

    display: none;

    overflow: hidden;
}


/* =========================================================
   PROFIL FEED - VIDEO
========================================================= */

.profile-feed-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ========================================
   PAUSE ICON IM PROFIL-FEED
======================================== */

.profile-feed-pause-icon {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 100px;
    height: 100px;

    object-fit: contain;

    z-index: 15;

    pointer-events: none;

    display: none;
}


/* =========================================================
   PROFIL FEED - VERLAUF
========================================================= */

.profile-feed-gradient {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 45%;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.8)
        );

    pointer-events: none;
}


/* =========================================================
   PROFIL FEED - ZURÜCK
========================================================= */

.profile-feed-back {
    position: absolute;

    top: 34px;
    left: 16px;

    z-index: 5;

    width: 45px;
    height: 45px;

    padding: 0;

    border: none;
    background: transparent;

    color: white;

    font-size: 42px;
    line-height: 40px;

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.7);
}


/* =========================================================
   PROFIL FEED - INFOS
========================================================= */

.profile-feed-info {
    position: absolute;

    left: 18px;
    bottom: 85px;

    width: 72%;

    z-index: 4;

    color: white;

    text-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.7);
}

.profile-feed-username {
    font-size: 20px;
    font-weight: bold;

    margin-bottom: 8px;
}

.profile-feed-caption {
    font-size: 16px;
    line-height: 22px;

    margin-bottom: 8px;
}

.profile-feed-sound {
    font-size: 14px;

    opacity: 0.8;
}


/* =========================================================
   PROFIL FEED - LIKE
========================================================= */

.profile-feed-actions {
    position: absolute;

    right: 18px;
    bottom: 165px;

    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: white;
}

.profile-feed-like {
    font-size: 42px;
    line-height: 42px;
}

.profile-feed-actions small {
    margin-top: 5px;

    font-size: 12px;
}


/* =========================================================
   PROFIL FEED - SOUND COVER
========================================================= */

.profile-feed-sound-cover {
    position: absolute;

    right: 15px;
    bottom: 90px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    z-index: 5;

    animation:
        soundRotate
        4s
        linear
        infinite;
}


/* =========================================================
   PROFIL FEED - ELEMENTE WEITER NACH UNTEN
   Weil hier keine untere Navigation vorhanden ist
========================================================= */

.profile-feed-screen .foryou-info {
    bottom: 28px;
}


.profile-feed-screen .foryou-actions {
    bottom: 98px;
}


.profile-feed-screen .sound-cover {
    bottom: 33px;
}


/* =========================================================
   PROFIL FEED - SCROLL / SLIDES
   Jeder Slide enthält:
   Video + Username + Caption + Sound + Aktionen
========================================================= */

.profile-feed-screen {
    overflow: hidden;
}


/* SCROLL-CONTAINER */

.profile-feed-scroll {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-snap-type: y mandatory;

    scrollbar-width: none;

    overscroll-behavior: contain;
}


/* Scrollbar in Chrome / Edge / Safari verstecken */

.profile-feed-scroll::-webkit-scrollbar {
    display: none;
}


/* EIN KOMPLETTES VIDEO */

.profile-feed-item {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100%;

    overflow: hidden;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}


/* VIDEO INNERHALB DES SLIDES */

.profile-feed-item .profile-feed-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   PROFIL FEED - DETAILS WEITER UNTEN
   Gleiche Position wie vorher
========================================================= */

.profile-feed-item .foryou-info {
    bottom: 28px;
}

.profile-feed-item .foryou-actions {
    bottom: 98px;
}

.profile-feed-item .sound-cover {
    bottom: 33px;
}


/* ZURÜCK-BUTTON MUSS ÜBER DEN SLIDES BLEIBEN */

.profile-feed-back {
    z-index: 20;
}


/* ========================================
   LOG OUT BUTTON IM PROFIL
======================================== */

.logout-button {
    background: transparent;
    border: none;

    color: white;

    font-size: 14px;
    font-weight: bold;

    padding: 6px 0;

    cursor: pointer;

    position: relative;
    top: -10px;
}


/* =========================================================
   ECHTES HANDY / IPHONE
   App füllt den kompletten Bildschirm
========================================================= */

@media (max-width: 600px) {

    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: black;
    }


    body {
        width: 100%;
        height: 100vh;
        height: 100dvh;

        margin: 0;
        padding: 0;

        display: block;

        overflow: hidden;

        background: black;
    }


    .phone {
        position: fixed;

        top: 0;
        left: 0;

        width: 100vw;
        max-width: none;

        height: 100vh;
        height: 100dvh;
        max-height: none;

        margin: 0;

        border: none;
        border-radius: 0;

        box-shadow: none;

        overflow: hidden;
    }


    .notch {
        display: none;
    }

}


/* =========================================================
   IPHONE - ELEMENTE OBEN FEIN AUSRICHTEN
========================================================= */

@media (max-width: 600px) {

    /* 1. FOR YOU - FOLLOWING / FEATURED HÖHER */
    .foryou-topbar {
        top: 28px !important;
    }


    /* 2. PROFIL - NAME + LOG OUT HÖHER */
    .profile-header {
        height: 90px !important;
    }

    .logout-button {
        top: -4px !important;
    }


    /* 3. EDIT PROFILE - TITEL AUF HÖHE VON X + DONE */
    .edit-profile-title {
        top: 0 !important;
    }


    /* 4. SEARCH - SUCHBALKEN MITTIG IM VERLAUF */
    .search-header {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }


    /* 5. PICK MUSIC - PFEIL + TITEL HÖHER */
    .sound-select-back {
        top: 22px !important;
    }

    .sound-select-title {
        top: 31px !important;
    }

}


/* =========================================================
   KAMERA - VORSCHAU HORIZONTAL SPIEGELN
========================================================= */

.record-camera {
    transform: scaleX(-1) !important;
}


/* =========================================================
   LIKED MUSICAL.LYS
========================================================= */

.liked-videos-screen {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #000;

    z-index: 95;

    display: none;
    overflow: hidden;
}


/* =========================================================
   LIKED MUSICAL.LYS - HEADER
========================================================= */

.liked-videos-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 105px;

    background:
        linear-gradient(
            135deg,
            #ff0751,
            #ff5a45,
            #ffd21c
        );

    z-index: 2;
}


/* ZURÜCK */

.liked-videos-back {
    position: absolute;

    left: 18px;
    bottom: 19px;

    width: 45px;
    height: 45px;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: white;

    font-size: 48px;
    font-weight: 300;
    line-height: 40px;

    cursor: pointer;
}


/* TITEL */

.liked-videos-title {
    position: absolute;

    left: 50%;
    bottom: 27px;

    transform:
        translateX(-50%);

    color: white;

    font-size: 21px;
    font-weight: bold;

    white-space: nowrap;
}


/* =========================================================
   LIKED MUSICAL.LYS - 3ER GRID
========================================================= */

.liked-videos-grid {
    position: absolute;

    top: 105px;
    left: 0;
    bottom: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows:
        190px;

    gap: 1px;

    background: white;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}


/* EIN VIDEO */

.liked-video-item {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: black;

    cursor: pointer;
}


.liked-video-item video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* LEERER ZUSTAND */

.liked-videos-empty {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    transform:
        translateY(-50%);

    color: #999;

    text-align: center;

    font-size: 16px;
}


/* ========================================
   SOUND DETAIL SEITE
======================================== */

.sound-detail-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 96;
    display: none;
    overflow: hidden;
}


/* ========================================
   OBERER BEREICH
======================================== */

.sound-detail-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background:
        linear-gradient(
            135deg,
            #ff0751,
            #ff5a45,
            #ffd21c
        );
    z-index: 3;
}


.sound-detail-back {
    position: absolute;
    left: 18px;
    top: 22px;

    width: 45px;
    height: 45px;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: white;

    font-size: 48px;
    font-weight: 300;
    line-height: 40px;

    cursor: pointer;

    z-index: 5;
}


/* ========================================
   SOUND COVER + TEXT
======================================== */

.sound-detail-info {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 18px;

    display: flex;
    align-items: center;

    gap: 16px;
}


.sound-detail-cover {
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 6px;

    background: #111;
}


.sound-detail-text {
    min-width: 0;
}


.sound-detail-title {
    color: white;

    font-size: 21px;
    font-weight: bold;

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


.sound-detail-artist {
    margin-top: 5px;

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

    font-size: 15px;

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

.profile-feed-sound-button {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    cursor: pointer;
}


/* ========================================
   VIDEO RASTER
======================================== */

.sound-detail-grid {
    position: absolute;

    top: 150px;
    left: 0;
    bottom: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    grid-auto-rows: 190px;

    gap: 1px;

    background: white;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}


.sound-detail-video-item {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: black;

    cursor: pointer;
}


.sound-detail-video-item video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ========================================
   LEERE SOUND-SEITE
======================================== */

.sound-detail-empty {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    transform:
        translateY(-50%);

    color: #999;

    text-align: center;

    font-size: 16px;
}


/* ========================================
   USE SOUND BUTTON
   SCHWEBT ÜBER DEM RASTER
======================================== */

.sound-detail-use-button {
    position: absolute;

    left: 50%;
    bottom: 34px;

    transform:
        translateX(-50%);

    width: calc(
        100% - 70px
    );

    max-width: 330px;

    height: 52px;

    border: none;
    border-radius: 26px;

    background:
        linear-gradient(
            90deg,
            #ff0751,
            #ff5a45,
            #ffd21c
        );

    color: white;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


/* ========================================
   SOUND COVER MUSS ANKLICKBAR SEIN
======================================== */

.profile-feed-item .sound-cover {
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer;
}

.profile-feed-item .sound-cover img {
    pointer-events: none;
}


/* ========================================
   DYNAMISCHER FOR YOU FEED - EBENE
======================================== */

#forYouFeedScroll {
    z-index: 2;
}

#foryouVideo {
    z-index: 1;
}


/* ========================================
   ALTE STATISCHE FOR-YOU-INFOS AUSBLENDEN
======================================== */

#foryouScreen > .foryou-gradient,
#foryouScreen > .foryou-info,
#foryouScreen > .sound-cover,
#foryouScreen > .foryou-actions {
    display: none !important;
}


/* ========================================
   DYNAMISCHER FOR YOU FEED - POSITIONEN
======================================== */

#forYouFeedScroll .foryou-info {
    left: 18px;
    bottom: 85px;
    width: 70%;
}

#forYouFeedScroll .foryou-actions {
    right: 12px;
    bottom: 155px;
}

#forYouFeedScroll .sound-cover {
    right: 15px;
    bottom: 90px;
}


/* ========================================
   VIDEO-VERARBEITUNG / PROCESSING
======================================== */

.record-processing-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.record-processing-overlay.is-visible {
    display: flex;
}

.record-processing-box {
    width: min(280px, calc(100% - 48px));
    padding: 30px 22px;
    border-radius: 18px;
    text-align: center;
    color: white;
    background: rgba(25, 25, 25, 0.96);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.record-processing-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ff2d55;
    border-right-color: #ff0751;
    border-radius: 50%;
    animation: record-processing-spin 0.8s linear infinite;
}

.record-processing-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.record-processing-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

@keyframes record-processing-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   FOR YOU – TAP TO START
======================================== */

.for-you-start-hint {
    position: absolute;
    inset: 0;

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

    z-index: 10000;

    background:
        rgba(0, 0, 0, 0.22);

    cursor: pointer;

    touch-action: manipulation;
}

.for-you-start-hint-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 18px 26px;

    color: white;
    text-align: center;

    background:
        rgba(0, 0, 0, 0.72);

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.for-you-start-hint-icon {
    margin-bottom: 8px;

    font-size: 28px;
}

.for-you-start-hint-title {
    font-size: 18px;
    font-weight: 700;
}

.for-you-start-hint-text {
    margin-top: 5px;

    font-size: 13px;
    opacity: 0.82;
}