<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Im Sumpf des Hafens - Charakter-Hintergründe</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a1a1a;
font-family: 'Crimson Text', Georgia, serif;
font-size: 11pt;
color: #2c1810;
line-height: 1.4;
}
.page {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.card {
width: 90mm;
min-height: 135mm;
padding: 10mm 8mm 8mm 8mm;
background:
linear-gradient(135deg, rgba(139,109,71,0.08) 0%, transparent 50%),
linear-gradient(225deg, rgba(139,109,71,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 30% 20%, rgba(210,180,140,0.3) 0%, transparent 60%),
#f4e8d1;
border: 2px solid #5c3a1e;
border-radius: 4px;
position: relative;
box-shadow:
inset 0 0 30px rgba(139,109,71,0.15),
inset 0 0 4px rgba(92,58,30,0.1),
3px 3px 12px rgba(0,0,0,0.5);
overflow: hidden;
page-break-inside: avoid;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 1px solid rgba(92,58,30,0.2);
border-radius: 2px;
margin: 3mm;
pointer-events: none;
}
.card-label {
font-family: 'Cinzel', serif;
font-size: 7pt;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #8b6d47;
text-align: center;
margin-bottom: 2mm;
}
.card-title {
font-family: 'Cinzel', serif;
font-size: 14pt;
font-weight: 700;
text-align: center;
color: #2c1810;
margin-bottom: 3mm;
line-height: 1.2;
}
.card-divider {
width: 40%;
margin: 0 auto 3mm auto;
border: none;
border-top: 1px solid #8b6d47;
opacity: 0.5;
}
.card-flavor {
font-style: italic;
font-size: 10pt;
color: #4a3728;
text-align: center;
margin-bottom: 3mm;
padding: 0 2mm;
line-height: 1.35;
}
.card-section-title {
font-family: 'Cinzel', serif;
font-size: 7.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #5c3a1e;
margin-top: 2.5mm;
margin-bottom: 1mm;
}
.card-memory {
font-style: italic;
font-size: 9.5pt;
color: #4a3728;
padding-left: 3mm;
border-left: 1.5px solid rgba(139,109,71,0.4);
margin-bottom: 1mm;
line-height: 1.35;
}
.card-memory strong {
font-style: normal;
color: #2c1810;
}
.card-list {
list-style: none;
padding: 0;
font-size: 9.5pt;
}
.card-list li {
padding-left: 4mm;
position: relative;
margin-bottom: 0.5mm;
line-height: 1.35;
}
.card-list li::before {
content: '\2022';
position: absolute;
left: 0;
color: #8b6d47;
}
/* Print */
@media print {
body { background: white; }
.page {
padding: 5mm;
gap: 8mm;
}
.card {
box-shadow:none;
border: 1.5px solid #5c3a1e;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
@page {
size: A4;
margin: 10mm;
}
</style>
</head>
<body>
<div class="page">
<!-- A: Das Hafenkind -->
<div class="card">
<div class="card-label">Hintergrund A</div>
<div class="card-title">Das Hafenkind</div>
<hr class="card-divider">
<div class="card-flavor">
Du bist hier aufgewachsen. Die Gassen sind dein Zuhause, die Dächer dein Spielplatz. Du kennst jeden Winkel, jeden Schleichweg, jeden Trick.
</div>
<div class="card-section-title">Erinnerung — Brenna</div>
<div class="card-memory">
Brenna hat dich einmal erwischt, als du Äpfel aus einer Lieferung geklaut hast. Statt dich zu verpfeifen, hat sie dir einen in die Hand gedrückt und gesagt: „Nächstes Mal fragst du. Ich kann nicht immer wegschauen.“
<br><br>
Seitdem hast du gefragt. Und sie hat immer etwas übrig gehabt.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Eltern tot oder verschwunden</li>
<li>Aufgezogen von Nachbarn, die sich abwechselten</li>
<li>Überlebt durch kleine Jobs, kleinere Diebstähle, große Träume</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Du schuldest Mirko vom Fischhändler noch drei Silber für die Decke, die du „geliehen“ hast</li>
<li>Außerdem wäre ein echtes Bett mal schön</li>
</ul>
</div>
<!-- B: Der Gestrandete -->
<div class="card">
<div class="card-label">Hintergrund B</div>
<div class="card-title">Der Gestrandete</div>
<hr class="card-divider">
<div class="card-flavor">
Du kamst nach Waterdeep mit großen Plänen. Die Realität war weniger beeindruckt. Jetzt sitzt du im Hafen fest, ohne Geld für die Heimreise und ohne Stolz, sie anzutreten.
</div>
<div class="card-section-title">Erinnerung — Velma</div>
<div class="card-memory">
Als du vor drei Monaten mit Fieber im Regen lagst, hat Velma dich gefunden. Sie hat dich in ihre Praxis geschleppt, dir Suppe eingeflößt und nichts dafür verlangt.
<br><br>
„Jeder braucht mal Hilfe,“ hat sie gesagt. „Gib's weiter, wenn du kannst.“
<br><br>
Du hast es noch nicht weitergegeben. Aber du hast es nicht vergessen.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Aus einer Kleinstadt an der Schwertküste</li>
<li>Wollte Händler werden, bei der Gilde anheuern oder Abenteurer sein</li>
<li>Alles gescheitert, Erspartes aufgebraucht</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Die Miete für dein Kellerloch ist überfällig</li>
<li>Der Wirt droht, deine Sachen auf die Straße zu werfen</li>
</ul>
</div>
<!-- C: Die alte Schuld -->
<div class="card">
<div class="card-label">Hintergrund C</div>
<div class="card-title">Die alte Schuld</div>
<hr class="card-divider">
<div class="card-flavor">
Du hattest mal ein besseres Leben. Dann hast du einen Fehler gemacht — und jetzt zahlst du dafür. Im Hafen fragt niemand nach deiner Vergangenheit. Das ist gut so.
</div>
<div class="card-section-title">Erinnerung — Jorik</div>
<div class="card-memory">
Jorik kennt deine Geschichte. Nicht alles, aber genug.
<br><br>
Er hat dich eines Abends am Hafen gefunden, betrunken und selbstmitleidig. Statt Fragen zu stellen, hat er dir seinen Flachmann gereicht und geschwiegen.
<br><br>
Später sagte er nur: „Wir alle tragen was mit uns rum. Wichtig ist, was wir jetzt tun.“
<br><br>
Seitdem nickt ihr euch zu, wenn ihr euch seht. Mehr braucht es nicht.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Früher in einem respektablen Beruf (Händler, Handwerker, kleiner Beamter)</li>
<li>Ein Fehler hat alles zerstört</li>
<li>Jetzt versteckst du dich vor der Vergangenheit</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Du zahlst immer noch Schulden ab</li>
<li>Und jemand hat angedeutet, dass er weiß, wer du wirklich bist</li>
</ul>
</div>
<!-- D: Der Aussteiger -->
<div class="card">
<div class="card-label">Hintergrund D</div>
<div class="card-title">Der Aussteiger</div>
<hr class="card-divider">
<div class="card-flavor">
Du warst mal auf der anderen Seite. Nicht Kartell, aber auch nicht sauber. Laufbursche, Schmuggler, Hehler — was man halt so macht, wenn man keine Wahl hat. Jetzt willst du raus.
</div>
<div class="card-section-title">Erinnerung — Tav</div>
<div class="card-memory">
Tav war dein Partner. Zusammen habt ihr Waren durch die Kanäle geschafft, ohne zu fragen, was drin war.
<br><br>
Als du aussteigen wolltest, hat er gesagt: „Nimm mich mit.“ Du hast genickt — und dann bist du alleine gegangen.
<br><br>
Du hast ihn seitdem nicht mehr gesehen. Bis jetzt.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Hast für kleine Gangs gearbeitet, bevor das Kartell alles übernahm</li>
<li>Nie was Schlimmes getan — aber auch nicht verhindert</li>
<li>Bist rechtzeitig verschwunden, bevor sie dich „befördern“ konnten</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Du brauchst genug für einen Neustart</li>
<li>Vielleicht eine andere Stadt, ein anderer Name</li>
</ul>
</div>
<!-- E: Die Familienehre -->
<div class="card">
<div class="card-label">Hintergrund E</div>
<div class="card-title">Die Familienehre</div>
<hr class="card-divider">
<div class="card-flavor">
Deine Familie war mal wer im Hafen. Nicht reich, aber respektiert. Dann hat das Kartell zugeschlagen — und jetzt bist du der Letzte, der den Namen noch trägt.
</div>
<div class="card-section-title">Erinnerung — Tamrik</div>
<div class="card-memory">
Tamrik war dein bester Freund als Kind. Eure Familien haben sich gegenseitig geholfen.
<br><br>
Nach dem „Unfall“ bei euch kam er vorbei, hat nichts gesagt, nur seinen Arm um dich gelegt. Später hat seine Mutter euch beiden Suppe gemacht.
<br><br>
Du hast gehört, was mit ihrer Bäckerei passiert ist. Du hast auch gehört, dass Tamrik verschwunden ist. Du hoffst, er ist in Sicherheit.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Eltern hatten einen kleinen Betrieb (Werkstatt, Laden, Schenke)</li>
<li>Kartell wollte Schutzgeld, sie haben sich geweigert</li>
<li>Es gab einen „Unfall“. Du hast überlebt.</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Du sparst für Rache — oder für einen Anwalt</li>
<li>Beides teuer, beides unwahrscheinlich</li>
</ul>
</div>
<!-- F: Der Beschützer -->
<div class="card">
<div class="card-label">Hintergrund F</div>
<div class="card-title">Der Beschützer</div>
<hr class="card-divider">
<div class="card-flavor">
Du bist nicht für dich selbst hier. Du bist hier für jemanden, der dich braucht — ein Geschwister, ein Kind, ein Freund, der nicht für sich selbst sorgen kann.
</div>
<div class="card-section-title">Erinnerung — Finnek</div>
<div class="card-memory">
Finnek erinnert dich an die Person, die du beschützt. Dieselbe Angst in den Augen, dieselbe verzweifelte Tapferkeit.
<br><br>
Du hast ihn mal gesehen, wie er Essensreste aus dem Müll gefischt hat. Du hast so getan, als hättest du nichts bemerkt — aber du hast dein halbes Brot auf der Mauer liegen lassen, wo er es finden würde.
<br><br>
Er hat nie Danke gesagt. Aber am nächsten Tag lag ein selbstgeschnitzter Anhänger an derselben Stelle.
</div>
<div class="card-section-title">Vergangenheit</div>
<ul class="card-list">
<li>Hast die Verantwortung für jemand anderen übernommen</li>
<li>Arbeitest jeden Job, den du kriegen kannst</li>
<li>Schläfst wenig, isst weniger, aber dein Schützling hat immer genug</li>
</ul>
<div class="card-section-title">Warum das Geld</div>
<ul class="card-list">
<li>Die kleine Irin braucht Medizin</li>
<li>Oder Essen. Oder einen sicheren Platz zum Schlafen.</li>
</ul>
</div>
</div>
</body>
</html>
