* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 64px;
    text-transform: lowercase;
}

.effekt {
    position: relative;
    height: 100vh;
    height: 100svh;     /* Handy: Höhe ohne ein-/ausfahrende Browserleiste */
    overflow-x: clip;   /* nichts ragt seitlich raus -> kein Querscrollen/Rauszoomen auf dem Handy */
}

/* w's über der Section abschneiden, bis sie hereinfallen */
#effekt-2 {
    overflow: hidden;
}

.anker {
    position: absolute;
    top: 720px;
    left: 800px;
    font-size: 2em;     /* wie die Browser-Standardgröße von h1 */
    font-weight: bold;
    white-space: nowrap;
}

/* Wort genau in der Mitte der Section */
.anker.mitte {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

/* Blasse Kopien hinter dem Wort, werden beim Scrollen auseinandergezogen */
.duplikat {
    white-space: nowrap;
}

#duplikat-1 {
    opacity: 0.06;
}

#duplikat-2 {
    opacity: 0.18;
}

/* Handy & kleine Tablets: Wort kleiner, damit es ganz ins Bild passt,
   und unten rechts am Rand statt an festen Pixel-Positionen */
@media (max-width: 768px) {
    .anker {
        top: auto;
        left: auto;
        right: 24px;
        bottom: 15%;
        font-size: 12vw;
    }

    .anker.mitte {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }
}