<!DOCTYPE html>

<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blaue Kristallwelt</title>
    <style>
        /* Der CSS-Bereich, der das Design festlegt */
        body {
            /* Wichtig: Hier muss der Pfad zu deinem blauen Kristallbild rein! */
            background-image: url('bilder/blaue_kristalle.jpg'); 
            /* Stellt sicher, dass das Bild den gesamten Hintergrund ausfüllt */
            background-size: cover; 
            /* Verhindert, dass das Bild sich wiederholt, falls es zu klein ist */
            background-repeat: no-repeat; 
            /* Lässt das Bild beim Scrollen fixiert, was einen coolen Effekt gibt */
            background-attachment: fixed; 
            /* Textfarbe, damit man sie auf dem dunklen Hintergrund gut lesen kann */
            color: #E0FFFF; /* Sehr helles Blau/Türkis */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        h1 {
            padding-top: 50px;
            font-size: 3em;
            /* Ein leichter Schatten, damit der Text besser vom Hintergrund abhebt */
            text-shadow: 3px 3px 6px rgba(0, 0, 50, 0.9);
        }

        .inhalt {
            /* Ein Kasten für den Inhalt, damit der Text lesbar bleibt */
            background-color: rgba(10, 10, 50, 0.7); /* Dunkelblau, leicht durchsichtig (70% Deckkraft) */
            max-width: 700px;
            margin: 30px auto;
            padding: 20px;
            border-radius: 10px;
            border: 2px solid #00BFFF; /* Ein leuchtend blauer Rand */
        }

        p {
            font-size: 1.1em;
            line-height: 1.6;
        }
    </style>

</head>

<body>

    <h1>Willkommen in der Tiefsee-Kristallhöhle</h1>

    <div class="inhalt">
        <p>
            Schön, dass du hier bist! Der Hintergrund ist mit den coolsten, blauen Kristallen gefüllt, die wir finden konnten. Sie funkeln, als wären sie direkt aus einem Fantasy-Spiel.
        </p>
        <p>
            Denk daran: Um die Kristalle wirklich zu sehen, musst du den Platzhalter-Pfad <code>bilder/blaue_kristalle.jpg</code> in der CSS-Datei durch den tatsächlichen Link oder Dateinamen deines Bildes ersetzen!
        </p>
    </div>

</body>

</html>