cursor
2a73d3e117
Educational page on hidden penguin knee anatomy and playful mating rituals. Co-authored-by: Cursor <cursoragent@cursor.com>
312 lines
12 KiB
HTML
312 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Pinguin-Knie: versteckte Anatomie, Wackelgang und fröhliche Liebe auf dem Eis.">
|
||
<title>Pinguin Knie — Anatomie & Liebe auf Eis</title>
|
||
<style>
|
||
:root {
|
||
--bg: #071018;
|
||
--surface: #0f1c2a;
|
||
--border: #1e3a52;
|
||
--text: #e8f4fc;
|
||
--muted: #7fa8c4;
|
||
--ice: #7dd3fc;
|
||
--orange: #fb923c;
|
||
--yellow: #fde047;
|
||
--pink: #f9a8d4;
|
||
--max: 44rem;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.65;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.hero {
|
||
padding: 2.5rem 1.5rem 2rem;
|
||
text-align: center;
|
||
background:
|
||
radial-gradient(ellipse 80% 55% at 50% 0%, rgba(125, 211, 252, 0.12), transparent),
|
||
radial-gradient(ellipse 40% 30% at 85% 70%, rgba(249, 168, 212, 0.08), transparent),
|
||
var(--bg);
|
||
}
|
||
|
||
.penguin-art {
|
||
width: min(14rem, 70vw);
|
||
margin: 0 auto 1.5rem;
|
||
filter: drop-shadow(0 12px 28px rgba(125, 211, 252, 0.2));
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(1.9rem, 5vw, 2.8rem);
|
||
font-weight: 800;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 0.5rem;
|
||
background: linear-gradient(135deg, var(--ice), var(--yellow), var(--orange));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.tagline {
|
||
color: var(--muted);
|
||
font-size: 1.1rem;
|
||
max-width: 32rem;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
main {
|
||
max-width: var(--max);
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem 4rem;
|
||
}
|
||
|
||
section { margin-bottom: 2.5rem; }
|
||
|
||
h2 {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--ice);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
h2.love { color: var(--pink); }
|
||
|
||
p { margin-bottom: 1rem; }
|
||
|
||
.knee-diagram {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.85rem;
|
||
padding: 1.25rem;
|
||
margin: 1.25rem 0;
|
||
}
|
||
|
||
.knee-diagram svg {
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 22rem;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
.knee-diagram figcaption {
|
||
font-size: 0.9rem;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.points {
|
||
list-style: none;
|
||
display: grid;
|
||
gap: 0.65rem;
|
||
}
|
||
|
||
.points li {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.65rem;
|
||
padding: 0.9rem 1.1rem;
|
||
border-left: 3px solid var(--ice);
|
||
}
|
||
|
||
.points.love li { border-left-color: var(--pink); }
|
||
|
||
.points strong { color: var(--yellow); }
|
||
|
||
.love-card {
|
||
background: linear-gradient(135deg, rgba(249, 168, 212, 0.1), rgba(251, 146, 60, 0.08));
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.85rem;
|
||
padding: 1.35rem 1.4rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.love-card h3 {
|
||
font-size: 1.05rem;
|
||
color: var(--pink);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.love-card p:last-child { margin-bottom: 0; }
|
||
|
||
.callout {
|
||
background: linear-gradient(135deg, rgba(125, 211, 252, 0.1), rgba(253, 224, 71, 0.08));
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.75rem;
|
||
padding: 1.25rem 1.35rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.callout .big {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--ice);
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.callout p:last-child { margin-bottom: 0; }
|
||
|
||
footer {
|
||
max-width: var(--max);
|
||
margin: 0 auto;
|
||
padding: 1.5rem;
|
||
border-top: 1px solid var(--border);
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
text-align: center;
|
||
}
|
||
|
||
footer a { color: var(--ice); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hero">
|
||
<svg class="penguin-art" viewBox="0 0 200 240" aria-hidden="true">
|
||
<ellipse cx="100" cy="195" rx="52" ry="38" fill="#1a2a3a"/>
|
||
<ellipse cx="100" cy="130" rx="58" ry="72" fill="#1e293b"/>
|
||
<ellipse cx="100" cy="125" rx="48" ry="62" fill="#0f172a"/>
|
||
<ellipse cx="72" cy="175" rx="14" ry="22" fill="#fb923c" transform="rotate(-15 72 175)"/>
|
||
<ellipse cx="128" cy="175" rx="14" ry="22" fill="#fb923c" transform="rotate(15 128 175)"/>
|
||
<circle cx="100" cy="52" r="36" fill="#0f172a"/>
|
||
<circle cx="88" cy="48" r="6" fill="#fff"/>
|
||
<circle cx="112" cy="48" r="6" fill="#fff"/>
|
||
<circle cx="89" cy="49" r="3" fill="#1e293b"/>
|
||
<circle cx="113" cy="49" r="3" fill="#1e293b"/>
|
||
<path d="M 94 62 Q 100 68 106 62" stroke="#fb923c" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||
<ellipse cx="100" cy="78" rx="8" ry="5" fill="#fde047" opacity="0.9"/>
|
||
<rect x="58" y="168" width="18" height="8" rx="4" fill="#334155" opacity="0.6"/>
|
||
<rect x="124" y="168" width="18" height="8" rx="4" fill="#334155" opacity="0.6"/>
|
||
<text x="100" y="225" text-anchor="middle" fill="#7dd3fc" font-size="11" font-family="system-ui,sans-serif">Knie? Da drin!</text>
|
||
</svg>
|
||
<h1>Pinguin Knie</h1>
|
||
<p class="tagline">Versteckte Gelenke, epischer Wackelgang — und Paarungsrituale, die selbst Natursendungen erröten lassen.</p>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<section>
|
||
<h2>Das Knie-Mysterium</h2>
|
||
<p>
|
||
Auf den ersten Blick wirken Pinguine wie stämmige Bein-Stummel mit Flossen.
|
||
Täuschung! <strong>Pinguine haben Knie</strong> — genau wie wir: Oberschenkelknochen (Femur),
|
||
Schienbein (Tibia), Wadenbein (Fibula), Kniescheibe. Nur halt <em>im Körper versteckt</em>,
|
||
unter Federn und Fettpolstern, damit weniger Wärme über die dünnen Beine entweicht.
|
||
</p>
|
||
<p>
|
||
Deshalb der Wackelgang: Die Beine stehen fast senkrecht unter dem Körper,
|
||
die „Knie“ sind nach hinten gebogen — ein Gang wie auf Stelzen in einem zu engen Anzug.
|
||
</p>
|
||
|
||
<figure class="knee-diagram">
|
||
<svg viewBox="0 0 320 200" aria-label="Schema: Pinguin-Bein mit verstecktem Kniegelenk im Körper">
|
||
<rect x="0" y="0" width="320" height="200" fill="#0f1c2a" rx="8"/>
|
||
<ellipse cx="160" cy="95" rx="70" ry="55" fill="#1e293b" stroke="#1e3a52" stroke-width="2"/>
|
||
<text x="160" y="55" text-anchor="middle" fill="#7fa8c4" font-size="11">Körper (Federn + Fett)</text>
|
||
<line x1="130" y1="130" x2="130" y2="175" stroke="#fb923c" stroke-width="14" stroke-linecap="round"/>
|
||
<line x1="190" y1="130" x2="190" y2="175" stroke="#fb923c" stroke-width="14" stroke-linecap="round"/>
|
||
<circle cx="130" cy="118" r="8" fill="#fde047" stroke="#fb923c" stroke-width="2"/>
|
||
<circle cx="190" cy="118" r="8" fill="#fde047" stroke="#fb923c" stroke-width="2"/>
|
||
<text x="130" y="100" text-anchor="middle" fill="#fde047" font-size="10">Knie</text>
|
||
<text x="190" y="100" text-anchor="middle" fill="#fde047" font-size="10">Knie</text>
|
||
<line x1="130" y1="175" x2="125" y2="192" stroke="#334155" stroke-width="6" stroke-linecap="round"/>
|
||
<line x1="190" y1="175" x2="195" y2="192" stroke="#334155" stroke-width="6" stroke-linecap="round"/>
|
||
<text x="160" y="188" text-anchor="middle" fill="#7fa8c4" font-size="10">Sichtbare „Stummel“ = Unterschenkel + Fuß</text>
|
||
</svg>
|
||
<figcaption>Schematisch: Das Knie sitzt im warmen Körper — nach außen guckt nur der Unterschenkel.</figcaption>
|
||
</figure>
|
||
|
||
<ul class="points">
|
||
<li><strong>Femur im Bauch</strong> — Der Oberschenkel liegt parallel zum Körper, nicht wie bei uns nach unten.</li>
|
||
<li><strong>Kniescheibe vorhanden</strong> — Patella gibt es; sie stabilisiert das Gelenk beim Rutschen und Watscheln.</li>
|
||
<li><strong>Beluga-Vergleich</strong> — Ähnliches Prinzip bei anderen Meeresvögeln: kurze Außenbeine, lange Innenbeine.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="love">Fröhliche Liebe auf Eis</h2>
|
||
<p>
|
||
Wer Knochen versteckt, der zeigt Gefühle offen. Pinguin-Paarung ist kein trockenes Biologie-Kapitel —
|
||
es ist <strong>Theater, Geschenke und Choreografie</strong>. Hier die fröhlichsten (und wissenschaftlich dokumentierten) Aspekte:
|
||
</p>
|
||
|
||
<div class="love-card">
|
||
<h3>🪨 Der Kieselstein-Brautservice</h3>
|
||
<p>
|
||
Adelie- und Eselspinguin-Männchen suchen den perfekten Stein und präsentieren ihn der Auserwählten.
|
||
Ein glatter, hübscher Kiesel = „Ich baue dir ein solides Nest.“
|
||
Manchmal klauen sie sich gegenseitig die Steine — Romantik mit Diebstahl, wie in jeder guten Komödie.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="love-card">
|
||
<h3>🎤 Duett-Gesang & Bauch-Billboard</h3>
|
||
<p>
|
||
Kaiserpinguine balzen mit individuellen Rufen — Partner erkennen sich am Klang über hunderte Meter im Sturm.
|
||
Königs- und Felsenpinguine zeigen den Bauch: aufgerichtet, Flügel ausgebreitet, „schau mal, wie prächtig ich bin“.
|
||
Reine Freude am Angeben, ohne Filter.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="love-card">
|
||
<h3>💃 Der Eselspinguin-Hockettanz</h3>
|
||
<p>
|
||
Kopf nach hinten, Schnabel zur Decke, Winseln, Kreise drehen — der Eselspinguin-Hochzeitswalzer
|
||
ist so übertrieben, dass Forscher:innen ihn „ecstatic display“ nennen.
|
||
Zuschauer-Pinguine gucken zu. Es ist das Antarktis-Äquivalent zu einem Flashmob.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="love-card">
|
||
<h3>🐧 Treue mit Plot-Twist</h3>
|
||
<p>
|
||
Viele Arten sind saisonal monogam: ein Partner pro Brutsaison, dann vielleicht ein anderer nächstes Jahr.
|
||
Kaiserpinguine trennen sich nach der Brut oft — kein Drama, einfach nächste Saison, neues Abenteuer.
|
||
Biologisch effizient, emotional… kompliziert lesbar. Wie eine Serie mit vielen Staffeln.
|
||
</p>
|
||
</div>
|
||
|
||
<ul class="points love">
|
||
<li><strong>Paarungszeit = Party</strong> — Kolonien werden laut, stinken nach Fisch und Guano, und jeder hat Meinung.</li>
|
||
<li><strong>Kopulation auf dem Eis</strong> — kurz, pragmatisch, danach weiterbrüten. Kein Schnickschnack, aber ernst gemeint.</li>
|
||
<li><strong>Schwule Pinguin-Paare</strong> — In Zoos dokumentiert (z. B. Roy & Silo, Central Park): sie adoptieren Eier und führen Nester — Liebe ohne Geschlechter-Vorlage.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Warum das alles zusammengehört</h2>
|
||
<p>
|
||
Die versteckten Knie ermöglichen effizientes Rutschen und Watscheln auf dem Eis.
|
||
Die ausladenden Balzrituale sichern, dass die richtigen Partner zusammenfinden — trotz tausender identisch aussehender Fracks.
|
||
Anatomie und Liebesleben: beides evolutionär auf „kalt, nass, aber trotzdem weiter“ optimiert.
|
||
</p>
|
||
|
||
<div class="callout">
|
||
<p class="big">Knie drin, Herz auf der Zunge (bzw. im Ruf)</p>
|
||
<p>
|
||
Pinguine beweisen: Man kann Gelenke verstecken und trotzdem bei der Liebe keine Kompromisse machen.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
Erstellt von @cursor · Gitea Issue #9 ·
|
||
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/9">froxxxy/playground</a>
|
||
· Quellen u. a.:
|
||
<a href="https://www.bbc.com/news/science-environment-11614248">BBC (Pinguin-Knie)</a>,
|
||
<a href="https://www.nationalgeographic.com/animals/article/penguin-mating-rituals">National Geographic (Balz)</a>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|