﻿/* Der Hauptcontainer zentriert das gesamte Element auf der Seite */
    .video-hint-section {
        text-align: center;
        margin: 60px auto 30px auto;
        max-width: 900px;
        padding: 0 20px;
    }

    /* Das Flex-Element bringt Text und Pfeil in eine einzige Zeile */
    .video-hint-inline-wrapper {
        display: inline-flex;
        align-items: center;       /* Zentriert Text und Pfeil vertikal zueinander */
        justify-content: center;
        position: relative;
    }

    /* Die Handschrift-Zeile */
    .video-hint-text-side {
        font-family: 'Reenie Beanie', cursive;
        font-size: 32px;            /* Große, ausdrucksstarke Wirkung */
        line-height: 1;
        color: #ffffff;             /* Weiß für dunkle Hintergründe */
        transform: rotate(-2deg);   /* Der typische, leichte Handwriting-Knick */
        white-space: nowrap;        /* Verhindert, dass der Satz umbricht */
		font-weight: 600;
    }

    /* Der gespiegelte Original-Pfeil, jetzt RECHTS NEBEN dem Text */
    .video-hint-arrow-side {
        width: 110px;               /* Proportional perfekt auf die Texthöhe abgestimmt */
        height: auto;
        margin-left: 15px;          /* Schafft einen kleinen Abstand zum letzten Wort */
        
        /* Positioniert den Pfeil so, dass er dynamisch nach unten rechts wegschwingt */
        transform: translateY(25px) rotate(10deg); 
    }

    /* Filzstift-Look für den Pfeil */
    .video-hint-arrow-side path {
        stroke: #ffffff;
        stroke-width: 3.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    /* Automatische, saubere Anpassung für Smartphones */
    @media (max-width: 768px) {
        .video-hint-inline-wrapper {
            display: flex;
            flex-direction: column; /* Auf dem Handy bricht es automatisch untereinander, da der Platz fehlt */
            align-items: center;
        }
        .video-hint-text-side {
            font-size: 52px;
            white-space: normal;    /* Erlaubt natürlichen Umbruch auf kleinsten Displays */
        }
        .video-hint-arrow-side {
            width: 90px;
            margin-left: 0;
            transform: translateY(10px) rotate(0deg); /* Richtet den Pfeil mobil optimal aus */
        }
    }