diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..ce84fe4
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,13 @@
+:root { color-scheme: light dark; }
+body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif; margin: 2rem; line-height: 1.5; }
+h1 { font-size: 1.8rem; margin-bottom: 1rem; }
+a { color: #0b5ed7; text-decoration: none; }
+a:hover { text-decoration: underline; }
+nav p { margin-bottom: 1.25rem; }
+table.calc { border-collapse: collapse; margin-top: 1rem; }
+.calc th { background: #f0f0f0; text-align: left; }
+.calc td, .calc th { border: 1px solid #ccc; padding: 0.5rem 0.75rem; }
+@media (prefers-color-scheme: dark) {
+  .calc th { background: #222; }
+  .calc td, .calc th { border-color: #444; }
+}
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..e2bf328
--- /dev/null
+++ b/index.php
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Grundlagen</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+  <h1>Übung 1</h1>
+  <nav>
+    <p><a href="info.php">PHP Info anzeigen</a> | <a href="test.php">Tankstellenberechnung (Aufgabe 3)</a></p>
+  </nav>
+  <?php
+  $x = 23;
+  $result = $x + $x;
+
+  echo "My Number: $result";
+  ?>
+</body>
+
+</html>
diff --git a/info.php b/info.php
new file mode 100644
index 0000000..d4e22f4
--- /dev/null
+++ b/info.php
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>PHP Info</title>
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <h1>PHP Info</h1>
+    <nav>
+      <p><a href="index.php">Start</a> | <a href="test.php">Tankstellenberechnung</a></p>
+    </nav>
+<?php phpinfo(); ?>
+  </body>
+</html>
diff --git a/test.php b/test.php
new file mode 100644
index 0000000..2e4d46a
--- /dev/null
+++ b/test.php
@@ -0,0 +1,51 @@
+<?php
+$liter1 = 40.5;
+$liter2 = 35.7;
+$preis  = 1.499;
+
+$gesamtLiter     = $liter1 + $liter2;
+$kostenFuellung1 = $liter1 * $preis;
+$kostenFuellung2 = $liter2 * $preis;
+$gesamtKosten    = $gesamtLiter * $preis;
+
+$fmtK1 = number_format($kostenFuellung1, 2, ',', '.');
+$fmtK2 = number_format($kostenFuellung2, 2, ',', '.');
+$fmtKG = number_format($gesamtKosten,    2, ',', '.');
+?>
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tankstellenberechnung (Aufgabe 3)</title>
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <h1>Tankstellenberechnung</h1>
+    <nav>
+      <p><a href="index.php">Start</a> | <a href="info.php">PHP Info</a></p>
+    </nav>
+
+    <p>Füllung 1: <?= $liter1 ?> L</p>
+    <p>Füllung 2: <?= $liter2 ?> L</p>
+    <p>Gesamtmenge: <?= $gesamtLiter ?> L</p>
+
+    <p>Kosten Füllung 1: <?= $fmtK1 ?> €</p>
+    <p>Kosten Füllung 2: <?= $fmtK2 ?> €</p>
+    <p>Gesamtkosten: <strong><?= $fmtKG ?> €</strong></p>
+
+    <table class="calc">
+      <thead>
+        <tr><th>Bezeichnung</th><th>Wert</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Füllung 1 (L)</td><td><?= $liter1 ?></td></tr>
+        <tr><td>Füllung 2 (L)</td><td><?= $liter2 ?></td></tr>
+        <tr><td>Gesamt (L)</td><td><?= $gesamtLiter ?></td></tr>
+        <tr><td>Kosten Füllung 1 (€)</td><td><?= $fmtK1 ?></td></tr>
+        <tr><td>Kosten Füllung 2 (€)</td><td><?= $fmtK2 ?></td></tr>
+        <tr><td>Gesamtkosten (€)</td><td><strong><?= $fmtKG ?></strong></td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>

Bezeichnung	Wert
Füllung 1 (L)
Füllung 2 (L)
Gesamt (L)
Kosten Füllung 1 (€)
Kosten Füllung 2 (€)
Gesamtkosten (€)