06-30-2026, 08:47 PM
(Dieser Beitrag wurde zuletzt bearbeitet: 07-17-2026, 07:23 PM von Val Aurelian.)
Code:
<div style="max-width: 620px; margin: 20px auto; background: #f2e9d8; color: #241c14; font-family: 'Crimson Text', Georgia, serif; box-shadow: 0 4px 20px rgba(0,0,0,.35); overflow: hidden;">
<div style="padding: 35px 40px 25px; text-align: center;">
<span style="display: block; font-family: 'Crimson Text', serif; font-size: 13px; letter-spacing: 2px; text-transform: lowercase; color: #6b1a1a; margin-bottom: -4px;">auf der suche nach einer neuen geschichte</span>
<b style="display: block; font-family: 'Cinzel', Georgia, serif; font-size: 30px; line-height: 100%; text-transform: uppercase; font-weight: 400; color: #241c14; letter-spacing: 1px;">zwei wege kreuzen sich</b>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #1c1714; color: #e8dcc8;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #c8973a;">gesucht</div>
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Avatar</div>
</div>
</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #3a342c;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier, welcher Charakter / welche Rolle gesucht wird (z. B. Alter, Zugehörigkeit, Aussehen, Charakterzüge).
</div>
</div>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #f2e9d8; color: #241c14;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Avatar</div>
</div>
</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #6b1a1a;">suchend</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier kurz den eigenen Charakter, der den Playpartner sucht.
</div>
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #b8a97e;">
</div>
</div>
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 170px; overflow: auto; padding: 18px 22px; background: #241c14; color: #e8dcc8;">
Hier ist Platz für deine Schlussworte, Hinweise zur Dynamik, Aktivität oder wichtige Punkte zur gemeinsamen Planung.
</div>
<div style="height: 34px; background: #e6d9bd; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #6b5c48;">Sail the Seas · second-age-of-pirates.de</div>
</div>Code:
<div style="max-width: 620px; margin: 20px auto; background: #f2e9d8; color: #241c14; font-family: 'Crimson Text', Georgia, serif; box-shadow: 0 4px 20px rgba(0,0,0,.35); overflow: hidden;">
<div style="padding: 35px 40px 25px; text-align: center;">
<span style="display: block; font-family: 'Crimson Text', serif; font-size: 13px; letter-spacing: 2px; text-transform: lowercase; color: #6b1a1a; margin-bottom: -4px;">auf der suche nach neuen geschichten</span>
<b style="display: block; font-family: 'Cinzel', Georgia, serif; font-size: 30px; line-height: 100%; text-transform: uppercase; font-weight: 400; color: #241c14; letter-spacing: 1px;">viele wege kreuzen sich</b>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #1c1714; color: #e8dcc8; border-top: 1px solid #3a342c;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #c8973a; color: #1c1714; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;">1</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #c8973a;">gesucht</div>
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Avatar</div>
</div>
</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #3a342c;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier, welcher Charakter / welche Rolle gesucht wird (z. B. Alter, Zugehörigkeit, Aussehen, Charakterzüge).
</div>
</div>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #f2e9d8; color: #241c14; border-top: 1px solid #b8a97e;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #c8973a; color: #1c1714; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;">2</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #6b1a1a;">gesucht</div>
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Avatar</div>
</div>
</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier, welcher Charakter / welche Rolle gesucht wird (z. B. Alter, Zugehörigkeit, Aussehen, Charakterzüge).
</div>
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #b8a97e;">
</div>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #1c1714; color: #e8dcc8; border-top: 1px solid #3a342c;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #c8973a; color: #1c1714; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;">3</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #c8973a;">gesucht</div>
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Avatar</div>
</div>
</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #3a342c;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier, welcher Charakter / welche Rolle gesucht wird (z. B. Alter, Zugehörigkeit, Aussehen, Charakterzüge).
</div>
</div>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #f2e9d8; color: #241c14; border-top: 1px solid #b8a97e;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #c8973a; color: #1c1714; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;">4</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #6b1a1a;">gesucht</div>
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #241c14; color: #e8dcc8;">Avatar</div>
</div>
</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier, welcher Charakter / welche Rolle gesucht wird (z. B. Alter, Zugehörigkeit, Aussehen, Charakterzüge).
</div>
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #b8a97e;">
</div>
</div>
<div style="min-height: 280px; padding: 40px 38px; position: relative; background: #1c1714; color: #e8dcc8; border-top: 2px solid #6b1a1a;">
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px; position: relative;">
<div style="position: relative; flex: 1;">
<div style="height: 8px; background: currentColor; opacity: .5; width: 100%;"></div>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 5px; z-index: 2; white-space: nowrap;">
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Name</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Alter</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Zugehörigkeit</div>
<div style="font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; background: #e8dcc8; color: #1c1714;">Avatar</div>
</div>
</div>
<div style="font-family: 'Crimson Text', serif; font-size: 19px; text-transform: lowercase; letter-spacing: -1px; white-space: nowrap; font-weight: bold; color: #c8973a;">suchend</div>
</div>
<div style="display: flex; gap: 25px; align-items: flex-start;">
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 150px; overflow: auto; padding-right: 8px;">
Beschreib hier kurz den eigenen Charakter, der die Playpartner sucht.
</div>
<img src="BILDURL HIER" alt="Bild hier einfügen" style="width: 150px; height: 150px; object-fit: cover; display: block; flex: 0 0 150px; border: 1px solid #3a342c;">
</div>
</div>
<div style="font-size: 12px; line-height: 175%; text-align: justify; height: 170px; overflow: auto; padding: 18px 22px; background: #241c14; color: #e8dcc8;">
Hier ist Platz für deine Schlussworte, Hinweise zur Dynamik, Aktivität oder wichtige Punkte zur gemeinsamen Planung.
</div>
<div style="height: 34px; background: #e6d9bd; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #6b5c48;">Sail the Seas · second-age-of-pirates.de</div>
</div>
