</> HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thion Press | Yî – Sagas und Mythen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=EB+Garamond:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0b0b0b;
color: #e9dfc7;
font-family: 'EB Garamond', serif;
line-height: 1.7;
}
a {
color: #d4b06b;
text-decoration: none;
}
a:hover {
opacity: 0.85;
}
header {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 3rem 1.5rem;
background:
linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.88)),
url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?q=80&w=1800&auto=format&fit=crop') center/cover;
border-bottom: 1px solid rgba(212,176,107,0.25);
}
.logo {
font-family: 'Cinzel', serif;
font-size: 4rem;
letter-spacing: 0.15em;
color: #f1dfb3;
margin-bottom: 1rem;
}
.subtitle {
max-width: 850px;
font-size: 1.4rem;
color: #d6ccb5;
}
nav {
position: sticky;
top: 0;
background: rgba(10,10,10,0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(212,176,107,0.2);
z-index: 1000;
}
nav ul {
display: flex;
justify-content: center;
gap: 2rem;
list-style: none;
padding: 1rem;
flex-wrap: wrap;
}
nav a {
font-size: 1.05rem;
letter-spacing: 0.05em;
}
section {
max-width: 1200px;
margin: auto;
padding: 6rem 1.5rem;
}
h2 {
font-family: 'Cinzel', serif;
font-size: 2.2rem;
margin-bottom: 2rem;
color: #f1dfb3;
}
.intro {
font-size: 1.3rem;
max-width: 900px;
color: #d8cfbc;
}
.books {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.book {
background: #141414;
border: 1px solid rgba(212,176,107,0.18);
border-radius: 18px;
overflow: hidden;
transition: transform 0.3s ease;
}
.book:hover {
transform: translateY(-6px);
}
.book img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.book-content {
padding: 1.8rem;
}
.book h3 {
font-family: 'Cinzel', serif;
margin-bottom: 1rem;
color: #f1dfb3;
font-size: 1.4rem;
}
.book p {
color: #d3cab8;
margin-bottom: 1.5rem;
font-size: 1.08rem;
}
.button {
display: inline-block;
padding: 0.85rem 1.4rem;
border: 1px solid #d4b06b;
border-radius: 999px;
color: #f1dfb3;
transition: 0.3s ease;
}
.button:hover {
background: #d4b06b;
color: #0d0d0d;
}
.quote-box {
background: #121212;
border-left: 4px solid #d4b06b;
padding: 2rem;
margin-top: 3rem;
font-size: 1.25rem;
color: #e4dbc7;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature {
background: #141414;
padding: 2rem;
border-radius: 16px;
border: 1px solid rgba(212,176,107,0.14);
}
.feature h3 {
font-family: 'Cinzel', serif;
margin-bottom: 1rem;
color: #f1dfb3;
}
footer {
border-top: 1px solid rgba(212,176,107,0.2);
padding: 4rem 1.5rem;
text-align: center;
color: #c9bfa9;
}
.footer-links {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.logo {
font-size: 2.7rem;
}
.subtitle {
font-size: 1.15rem;
}
h2 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<header>
<div class="logo">THION PRESS</div>
<p class="subtitle">
Verlag für mythopoetische Literatur, archaische Fantasy,
Weltendichtung und episch-mythologische Erzählkunst.
</p>
</header>
<nav>
<ul>
<li><a href="#welt">Yî</a></li>
<li><a href="#werke">Werke</a></li>
<li><a href="#leser">Für Leser</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<section id="welt">
<h2>Yî – Sagas und Mythen</h2>
<p class="intro">
Yî ist ein mythopoetischer Zyklus über Schicksal, Macht,
göttliche Ordnung und den Verlust des Selbst.
Die Welt Ithrum ist kein Ort schneller Antworten,
sondern ein Geflecht aus Nachwelten, Götterreichen,
vergessenen Zeiten und miteinander ringenden Mächten.
</p>
<div class="quote-box">
„Nicht jede Wahrheit offenbart sich im Augenblick.
Manche wachsen erst im Nachhall.“
</div>
</section>
<section id="werke">
<h2>Die Werke</h2>
<div class="books">
<div class="book">
<img src="https://images.unsplash.com/photo-1518562180175-34a163b1a9a6?q=80&w=1200&auto=format&fit=crop" alt="Der Aufstieg Thions">
<div class="book-content">
<h3>Der Aufstieg Thions</h3>
<p>
Ein archaisches Fantasy-Epos über den Aufstieg eines Mannes,
der unter göttlichem Einfluss allmählich beginnt,
sich selbst zu verlieren.
</p>
<a class="button" href="https://www.amazon.de/dp/3912697175" target="_blank">Zum Buch</a>
</div>
</div>
<div class="book">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1200&auto=format&fit=crop" alt="Thions Niedergang">
<div class="book-content">
<h3>Thions Niedergang</h3>
<p>
Nach Sieg und Erhebung beginnt das Reich zu zerfallen.
Eine große Unfruchtbarkeit legt sich über die Welt,
während Macht und Einsamkeit Thion verwandeln.
</p>
<a class="button" href="#">Demnächst</a>
</div>
</div>
<div class="book">
<img src="https://images.unsplash.com/photo-1512820790803-83ca734da794?q=80&w=1200&auto=format&fit=crop" alt="Codex Yî">
<div class="book-content">
<h3>Codex Yî</h3>
<p>
Mythologischer Begleitband mit Götterwelt,
Weltstruktur, frühen Zeitaltern, Wesenheiten,
Begriffen und kosmischen Zusammenhängen.
</p>
<a class="button" href="#">Mehr erfahren</a>
</div>
</div>
</div>
</section>
<section id="leser">
<h2>Für Leser</h2>
<div class="features">
<div class="feature">
<h3>Archaische Sprache</h3>
<p>
Die Werke folgen bewusst einer getragenen,
poetischen und altertümlichen Sprachführung.
</p>
</div>
<div class="feature">
<h3>Slow Burn</h3>
<p>
Die Welt entfaltet sich langsam.
Viele Zusammenhänge offenbaren sich erst über Zeit.
</p>
</div>
<div class="feature">
<h3>Mythopoetische Tiefe</h3>
<p>
Im Mittelpunkt stehen Mythos, Tragik,
Götterordnung, Schicksal und Weltstruktur.
</p>
</div>
</div>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p class="intro">
Für Presse, Buchhandel, Leserunden oder allgemeine Anfragen:
</p>
<div class="quote-box">
kontakt@thion-press.com
</div>
</section>
<footer>
<div>© 2026 Thion Press</div>
<div class="footer-links">
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
<a href="https://linktr.ee/open_yi_project" target="_blank">Linktree</a>
</div>
</footer>
</body>
</html>