```
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>PHP OnePager</title>
<style>
@page { size: A4 landscape; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --php: #777BB4;
  --php-dark: #4F5B93;
  --php-darker: #2C3E66;
  --accent: #F1C40F;
  --ink: #1a1a1a;
  --muted: #5a6470;
  --line: #e5e5e5;
  --bg-soft: #f5f5fb;
}

html, body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-size: 9.5pt;
  line-height: 1.4;
}

.page {
  width: 297mm;
  height: 210mm;
  padding: 9mm 11mm 9mm 11mm;
  position: relative;
}

/* ===== HERO ===== */
.hero {
  display: table;
  width: 100%;
  margin-bottom: 4mm;
}
.hero-logo, .hero-text, .hero-stats {
  display: table-cell;
  vertical-align: middle;
}
.hero-logo { width: 28mm; padding-right: 5mm; }
.hero-logo-box {
  width: 22mm; height: 22mm;
  background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
  border-radius: 5mm;
  display: flex; align-items: center; justify-content: center;
  font-size: 18pt; font-weight: 800;
  color: white;
  letter-spacing: -1pt;
}
.hero h1 {
  font-size: 20pt;
  font-weight: 800;
  letter-spacing: -0.5pt;
  line-height: 1.1;
}
.hero h1 .accent { color: var(--php); }
.hero p {
  font-size: 9.5pt;
  color: var(--muted);
  margin-top: 1mm;
}
.hero-stats {
  width: 110mm;
  text-align: right;
}
.stats-row {
  display: inline-table;
  border-collapse: collapse;
}
.stat-cell {
  display: table-cell;
  padding: 0 5mm;
  text-align: center;
  border-right: 0.5pt solid var(--line);
  vertical-align: middle;
}
.stat-cell:last-child { border-right: none; padding-right: 0; }
.stat-cell:first-child { padding-left: 0; }
.stat-num {
  font-size: 14pt;
  font-weight: 800;
  color: var(--php);
  line-height: 1;
}
.stat-label {
  font-size: 6.5pt;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5pt;
  margin-top: 1mm;
}

/* ===== Divider ===== */
.divider {
  height: 1.5pt;
  background: var(--ink);
  margin-bottom: 4mm;
}

/* ===== GRID 3-Spalten ===== */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4mm;
  margin-bottom: 4mm;
}
.col { display: flex; flex-direction: column; gap: 4mm; }

.block { display: flex; flex-direction: column; gap: 1.5mm; }
.block h2 {
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5pt;
  color: var(--php);
  display: flex;
  align-items: center;
  gap: 2mm;
  border-bottom: 2pt solid var(--php);
  padding-bottom: 1.2mm;
}
.block h2 .ico { width: 4mm; height: 4mm; flex-shrink: 0; }

/* ===== FEATURE LIST ===== */
.feature-list { display: flex; flex-direction: column; gap: 1.5mm; }
.feature-row {
  display: grid;
  grid-template-columns: 4.5mm 1fr;
  gap: 1.8mm;
  align-items: start;
}
.feature-row .dot {
  width: 4mm; height: 4mm; margin-top: 0.2mm;
  background: var(--php);
  border-radius: 1mm;
  display: flex; align-items: center; justify-content: center;
  font-size: 6pt; font-weight: 800; color: white;
}
.feature-row .text { font-size: 8.5pt; line-height: 1.35; }
.feature-row .text b { color: var(--php-dark); }
.feature-row code {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 7.5pt;
  background: var(--bg-soft);
  padding: 0 1mm;
  border-radius: 1mm;
  color: var(--php-dark);
}

/* ===== CODE ===== */
.code {
  background: #1e2a3a;
  color: #e6e6e6;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 7pt;
  padding: 2.5mm 3mm;
  border-radius: 1.5mm;
  line-height: 1.5;
}
.code .c { color: #6b8aae; font-style: italic; }
.code .k { color: #ff79c6; }
.code .s { color: #f1c40f; }
.code .f { color: #50fa7b; }
.code .t { color: #8be9fd; }
.code .v { color: #ffb86c; }

/* ===== ECOSYSTEM ===== */
.eco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5mm;
}
.eco-item {
  background: var(--bg-soft);
  border-left: 1.5pt solid var(--php);
  border-radius: 1mm;
  padding: 1.5mm 2mm;
  display: flex; align-items: center; gap: 2mm;
}
.eco-ico {
  width: 5mm; height: 5mm; flex-shrink: 0;
  background: var(--php-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.eco-text { display: flex; flex-direction: column; gap: 0.2mm; }
.eco-name { font-weight: 700; font-size: 8pt; color: var(--php-dark); }
.eco-desc { font-size: 6.5pt; color: var(--muted); }

/* ===== TYPE TABLE ===== */
.types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5mm;
}
.type {
  background: var(--bg-soft);
  padding: 1.3mm 2mm;
  border-radius: 1mm;
  font-size: 7.5pt;
}
.type b {
  font-family: "SF Mono", Consolas, monospace;
  color: var(--php-dark);
  display: block;
  font-size: 8pt;
}
.type span { color: var(--muted); font-size: 6.8pt; }

/* ===== SPLIT (composer/comparison) ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm;
}
.split-col h4 {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4pt;
  margin-bottom: 1mm;
}
.split-col.modern h4 { color: var(--php); }
.split-col.legacy h4 { color: var(--muted); }
.split-col ul { list-style: none; }
.split-col li {
  font-size: 7.5pt;
  padding-left: 3mm;
  position: relative;
  margin-bottom: 0.8mm;
  line-height: 1.3;
}
.split-col.modern li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--php);
  font-weight: 800;
}
.split-col.legacy li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-weight: 800;
}

/* ===== FOOTER ===== */
.footer {
  position: absolute;
  left: 11mm;
  right: 11mm;
  bottom: 9mm;
  background: var(--php-darker);
  color: white;
  padding: 3mm 5mm;
  border-radius: 1.5mm;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4mm;
  align-items: center;
}
.footer-text { font-size: 8.5pt; line-height: 1.45; }
.footer-text b { color: var(--accent); }
.footer-tag {
  background: var(--php);
  color: white;
  padding: 1.5mm 3mm;
  border-radius: 1.5mm;
  font-weight: 800;
  font-size: 8.5pt;
  white-space: nowrap;
}
</style>
</head>
<body>
<div class="page">

  <!-- HERO -->
  <header class="hero">
    <div class="hero-logo"><div class="hero-logo-box">php</div></div>
    <div class="hero-text">
      <h1><span class="accent">PHP</span> – Server-Sprache des Web</h1>
      <p>Dynamische Webseiten · seit 1995 · 75% aller Websites · objektorientiert &amp; funktional</p>
    </div>
    <div class="hero-stats">
      <div class="stats-row">
        <div class="stat-cell">
          <div class="stat-num">8.4</div>
          <div class="stat-label">Aktuelle Version</div>
        </div>
        <div class="stat-cell">
          <div class="stat-num">1995</div>
          <div class="stat-label">Erstes Release</div>
        </div>
        <div class="stat-cell">
          <div class="stat-num">75%</div>
          <div class="stat-label">Aller Websites</div>
        </div>
        <div class="stat-cell">
          <div class="stat-num">300k+</div>
          <div class="stat-label">Composer-Pakete</div>
        </div>
      </div>
    </div>
  </header>

  <div class="divider"></div>

  <!-- MAIN GRID -->
  <main class="grid">

    <!-- ===== SPALTE 1 ===== -->
    <div class="col">

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polygon points="12,2 22,8 22,16 12,22 2,16 2,8"/>
          </svg>
          Kernkonzepte
        </h2>
        <div class="feature-list">
          <div class="feature-row">
            <div class="dot">1</div>
            <div class="text"><b>Server-seitig</b> – läuft auf Webservern, generiert HTML pro Request</div>
          </div>
          <div class="feature-row">
            <div class="dot">2</div>
            <div class="text"><b>Dynamisch typisiert</b> – Typen zur Laufzeit, optional mit Type-Hints prüfbar</div>
          </div>
          <div class="feature-row">
            <div class="dot">3</div>
            <div class="text"><b>OOP &amp; funktional</b> – Klassen, Interfaces, Traits, Enums, First-Class-Funktionen</div>
          </div>
          <div class="feature-row">
            <div class="dot">4</div>
            <div class="text"><b>Composer</b> – moderner Paket-Manager für Dependencies und Autoloading</div>
          </div>
        </div>
      </section>

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M3 6h18M3 12h18M3 18h18"/>
          </svg>
          Datentypen
        </h2>
        <div class="types">
          <div class="type"><b>int</b><span>Ganze Zahlen</span></div>
          <div class="type"><b>float</b><span>Kommazahlen</span></div>
          <div class="type"><b>string</b><span>Text in '' oder ""</span></div>
          <div class="type"><b>bool</b><span>true / false</span></div>
          <div class="type"><b>array</b><span>Liste oder Map</span></div>
          <div class="type"><b>object</b><span>Klassen-Instanz</span></div>
          <div class="type"><b>null</b><span>kein Wert</span></div>
          <div class="type"><b>callable</b><span>Funktion / Closure</span></div>
        </div>
      </section>

    </div>

    <!-- ===== SPALTE 2 ===== -->
    <div class="col">

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/>
          </svg>
          Hello World
        </h2>
        <div class="code"><span class="t">&lt;?php</span><br>
<span class="k">declare</span>(strict_types=<span class="s">1</span>);<br>
<br>
<span class="k">function</span> <span class="f">greet</span>(<span class="t">string</span> <span class="v">$name</span>): <span class="t">string</span> {<br>
&nbsp;&nbsp;<span class="k">return</span> <span class="s">"Hallo, </span><span class="v">$name</span><span class="s">!"</span>;<br>
}<br>
<br>
<span class="k">echo</span> <span class="f">greet</span>(<span class="s">'Marek'</span>);<br>
<span class="c">// Hallo, Marek!</span></div>
      </section>

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
          Moderne vs. Legacy
        </h2>
        <div class="split">
          <div class="split-col modern">
            <h4>Modern (8.x)</h4>
            <ul>
              <li>strict_types</li>
              <li>Readonly Properties</li>
              <li>Enums &amp; Match</li>
              <li>Named Arguments</li>
              <li>Promoted Constructor</li>
              <li>Composer + PSR</li>
            </ul>
          </div>
          <div class="split-col legacy">
            <h4>Legacy (5.x)</h4>
            <ul>
              <li>magic_quotes</li>
              <li>register_globals</li>
              <li>mysql_* Funktionen</li>
              <li>kein Typ-System</li>
              <li>include/require Chaos</li>
              <li>Spaghetti-Code</li>
            </ul>
          </div>
        </div>
      </section>

    </div>

    <!-- ===== SPALTE 3 ===== -->
    <div class="col">

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/>
            <line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
            <line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/>
          </svg>
          Ökosystem
        </h2>
        <div class="eco-grid">
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">Laravel</span>
              <span class="eco-desc">Full-Stack Framework</span>
            </div>
          </div>
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">Symfony</span>
              <span class="eco-desc">Enterprise-Framework</span>
            </div>
          </div>
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">Composer</span>
              <span class="eco-desc">Paket-Manager</span>
            </div>
          </div>
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">PHPUnit</span>
              <span class="eco-desc">Testing-Framework</span>
            </div>
          </div>
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">PHPStan</span>
              <span class="eco-desc">Static Analysis</span>
            </div>
          </div>
          <div class="eco-item">
            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
            <div class="eco-text">
              <span class="eco-name">Shopware</span>
              <span class="eco-desc">E-Commerce-Plattform</span>
            </div>
          </div>
        </div>
      </section>

      <section class="block">
        <h2>
          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
          </svg>
          Einsatzgebiete
        </h2>
        <div class="feature-list">
          <div class="feature-row">
            <div class="dot">W</div>
            <div class="text"><b>Web-Backends</b> – REST/GraphQL APIs, MVC-Apps mit Laravel oder Symfony</div>
          </div>
          <div class="feature-row">
            <div class="dot">C</div>
            <div class="text"><b>CMS</b> – WordPress, Drupal, TYPO3 für Content-Management</div>
          </div>
          <div class="feature-row">
            <div class="dot">E</div>
            <div class="text"><b>E-Commerce</b> – Shopware, Magento, WooCommerce</div>
          </div>
          <div class="feature-row">
            <div class="dot">$</div>
            <div class="text"><b>CLI-Tools</b> – Symfony Console, Laravel Artisan für Automation</div>
          </div>
        </div>
      </section>

    </div>

  </main>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="footer-text">
      <b>Wann PHP wählen?</b> Wenn du schnell ein Web-Backend brauchst, ein riesiges Ökosystem nutzen willst und eine reife Sprache mit großem Talent-Pool suchst. Moderne PHP 8 ist nicht das PHP von 2005.
    </div>
    <div class="footer-tag">php.net</div>
  </footer>

</div>
</body>
</html>
```