body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 0;
        }

        .container {
            display: flex;
            gap: 20px;
            max-width: 940px; /* 450 + 450 + 40 */
            width: 100%;
            margin-bottom: 30px;
        }

        #shadow-box {
            width: 200px;
            height: 100px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            transition: box-shadow 0.2s ease;
        }

        .controls {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: grid;
            gap: 15px;
            width: 400px;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        label {
            font-weight: bold;
            font-size: 0.9em;
            color: #333;
            min-width: 100px;
        }

        input[type="range"] {
            flex: 1;
            cursor: pointer;
        }

        input[type="color"] {
            width: 40px;
            height: 30px;
            border: none;
            cursor: pointer;
        }

        input[type="checkbox"] {
            margin: 0;
        }

        .value-display {
            font-family: monospace;
            font-size: 0.9em;
            color: #007acc;
            min-width: 70px;
            text-align: right;
        }

        .info {
            margin-top: 10px;
            font-size: 0.8em;
            color: #555;
            line-height: 1.4;
        }

        .css-output {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 440px;
        }

        .css-code {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.95em;
            color: #d63384;
            margin-top: 10px;
            white-space: pre-wrap;
            word-break: break-all;
        }
		
		/* Stil für den Button, damit er wie ein Textblock aussieht */
.css-code {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #d63384;
    margin-top: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.css-code:hover {
    background: #e9e9e9;
}