+Update: Added printfiles and updated website.
This commit is contained in:
+563
@@ -0,0 +1,563 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JGA Wendl – Infos für alle</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--parchment: #f4e8c1;
|
||||
--parchment-dark: #e8d5a0;
|
||||
--ink: #1a0f00;
|
||||
--ink-light: #3d2200;
|
||||
--red: #8b1a1a;
|
||||
--gold: #c9a227;
|
||||
--gold-light: #f0c94a;
|
||||
--shadow: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: #0d0800;
|
||||
font-family: 'Crimson Pro', Georgia, serif;
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
background-image: radial-gradient(ellipse at 50% 0%, #2a1500 0%, #0d0800 60%);
|
||||
padding: 1.2rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── HEADER / TITELBLATT ──────────────── */
|
||||
.cover-header {
|
||||
text-align: center;
|
||||
padding: 1.8rem 1.5rem 1.6rem;
|
||||
position: relative;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
/* Goldener Doppelrahmen ums Titelblatt */
|
||||
.cover-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0.6rem;
|
||||
border: 1px solid rgba(201,162,39,0.45);
|
||||
pointer-events: none;
|
||||
}
|
||||
.cover-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1rem;
|
||||
border: 2px solid rgba(201,162,39,0.7);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cover-eyebrow {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.42em;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.cover-emblem {
|
||||
font-size: 2rem;
|
||||
color: var(--gold-light);
|
||||
display: block;
|
||||
letter-spacing: 0.3em;
|
||||
margin-bottom: 0.3rem;
|
||||
text-shadow: 0 0 24px rgba(201,162,39,0.55);
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.34em;
|
||||
color: #c8a86a;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-family: 'Cinzel Decorative', serif;
|
||||
font-size: clamp(2.3rem, 8vw, 3.6rem);
|
||||
color: var(--gold-light);
|
||||
text-shadow:
|
||||
0 0 34px rgba(201,162,39,0.7),
|
||||
2px 2px 0 #5a3a00,
|
||||
4px 4px 0 #3a2000;
|
||||
line-height: 1.1;
|
||||
margin: 0.1rem 0 0.4rem;
|
||||
}
|
||||
|
||||
.cover-tagline {
|
||||
font-family: 'Crimson Pro', serif;
|
||||
font-style: italic;
|
||||
font-size: 0.98rem;
|
||||
color: #c8a86a;
|
||||
max-width: 32rem;
|
||||
margin: 0.5rem auto 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cover-divider {
|
||||
width: 60%;
|
||||
max-width: 320px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||||
margin: 0.9rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.cover-divider::before, .cover-divider::after {
|
||||
content: '◆';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--gold);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.cover-divider::before { left: -6px; }
|
||||
.cover-divider::after { right: -6px; }
|
||||
|
||||
/* ── PARCHMENT ────────────────────────── */
|
||||
.parchment {
|
||||
background: var(--parchment);
|
||||
border: 3px solid #8a6520;
|
||||
border-radius: 4px;
|
||||
padding: 1.3rem 1.6rem;
|
||||
margin-bottom: 1.1rem;
|
||||
box-shadow:
|
||||
0 0 0 1px var(--gold),
|
||||
0 8px 30px rgba(0,0,0,0.5),
|
||||
inset 0 1px 0 rgba(255,255,255,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.parchment::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border: 1px solid rgba(138,101,32,0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Cinzel Decorative', serif;
|
||||
font-size: 1.2rem;
|
||||
color: var(--red);
|
||||
text-align: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: #8a6520;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.ornament {
|
||||
text-align: center;
|
||||
color: var(--gold);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.5em;
|
||||
margin: 0.5rem 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.45rem;
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
.flavor-text {
|
||||
font-style: italic;
|
||||
background: rgba(138,101,32,0.08);
|
||||
border-left: 3px solid var(--gold);
|
||||
padding: 0.55rem 0.85rem;
|
||||
margin: 0.6rem 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
/* ── RULES BOX ────────────────────────── */
|
||||
.rules-box {
|
||||
background: rgba(138,101,32,0.08);
|
||||
border: 1px solid rgba(201,162,39,0.4);
|
||||
border-radius: 4px;
|
||||
padding: 0.7rem 0.95rem;
|
||||
margin: 0.55rem 0;
|
||||
}
|
||||
|
||||
.rules-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--red);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.rules-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rules-list li {
|
||||
font-size: 0.92rem;
|
||||
padding: 0.15rem 0 0.15rem 1.2rem;
|
||||
position: relative;
|
||||
color: var(--ink-light);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.rules-list li::before {
|
||||
content: '⚔';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gold);
|
||||
top: 0.35rem;
|
||||
}
|
||||
|
||||
/* ── TIMELINE ─────────────────────────── */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0; bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, var(--gold), var(--gold) 80%, transparent);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '◆';
|
||||
position: absolute;
|
||||
left: -1.7rem;
|
||||
color: var(--gold);
|
||||
font-size: 0.8rem;
|
||||
top: 0.1rem;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
font-size: 1rem;
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timeline-note {
|
||||
font-size: 0.9rem;
|
||||
color: #5a3a10;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── PARKING IMAGES ───────────────────── */
|
||||
.parking-images {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin: 0.7rem 0;
|
||||
}
|
||||
|
||||
.parking-images figure { margin: 0; }
|
||||
|
||||
.parking-images img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #8a6520;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.parking-images figcaption {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: #5a3a10;
|
||||
text-align: center;
|
||||
margin-top: 0.4rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── AUTOS TABLE ──────────────────────── */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.8rem 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
background: #3d2200;
|
||||
color: var(--gold-light);
|
||||
padding: 0.45rem 0.8rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(138,101,32,0.25);
|
||||
color: var(--ink-light);
|
||||
vertical-align: top;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:nth-child(even) td { background: rgba(138,101,32,0.05); }
|
||||
|
||||
td strong { color: var(--ink); }
|
||||
|
||||
.note {
|
||||
font-size: 0.88rem;
|
||||
color: #8a6520;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
/* ── PRINT ────────────────────────────── */
|
||||
/* Farben überall exakt drucken (Hintergründe nicht weglassen) */
|
||||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
|
||||
|
||||
@media print {
|
||||
@page { size: A4; margin: 0; }
|
||||
body {
|
||||
padding: 0;
|
||||
background: #0d0800;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 0%, #2a1500 0%, #0d0800 55%);
|
||||
}
|
||||
.page-wrap { max-width: none; margin: 0; padding: 7mm 12mm 12mm; }
|
||||
.cover-header { padding-top: 0; }
|
||||
/* Karten dürfen die Seite füllen; nur kleine Blöcke bleiben zusammen */
|
||||
.parking-images, .timeline-item, .rules-box, .flavor-text, tr { break-inside: avoid; }
|
||||
.section-title, .rules-title { break-after: avoid; }
|
||||
/* Transparenter Abstandshalter: erzwingt Umbruch + 7mm dunkler Abstand vor der Karte */
|
||||
.page-break-before { break-before: page; page-break-before: always; height: 7mm; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.parking-images { grid-template-columns: 1fr; }
|
||||
.parchment { padding: 1.2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-wrap">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="cover-header">
|
||||
<div class="cover-eyebrow">Junggesellenabschied</div>
|
||||
<span class="cover-emblem">⚔</span>
|
||||
<div class="cover-subtitle">Ein Fest für den Bräutigam</div>
|
||||
<div class="cover-title">Wendl</div>
|
||||
<div class="cover-tagline">Alles Wichtige zu Anreise, Parken und Ablauf – auf einen Blick.</div>
|
||||
<div class="cover-divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- TREFFPUNKT & PARKEN -->
|
||||
<div class="parchment">
|
||||
<div class="section-title">Treffpunkt & Parken</div>
|
||||
<div class="section-subtitle">Auer-Welsbach-Gasse 36, 8055 Graz</div>
|
||||
|
||||
<div class="flavor-text">
|
||||
„Reitet nach Graz, findet die XAL GmbH – und trefft euch im XAL Park. Dort gibt es ein gekühltes Bier und den Überblick."
|
||||
</div>
|
||||
|
||||
<p>Es gibt zwei firmeneigene Parkflächen (rot markiert), die am Samstag auch ohne Zugangschip frei befahren werden können:</p>
|
||||
|
||||
<div class="parking-images">
|
||||
<figure>
|
||||
<img src="WhatsApp Image 2026-06-15 at 13.25.20.jpeg" alt="Parkplätze 1, 2 und 3">
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="WhatsApp Image 2026-06-15 at 13.26.21.jpeg" alt="XAL Park Treffpunkt">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="rules-box">
|
||||
<div class="rules-title">Parkoptionen im Überblick</div>
|
||||
<ul class="rules-list">
|
||||
<li><strong>Parkplatz ①</strong> – Schotterfläche links, ohne Zugangschip zugänglich</li>
|
||||
<li><strong>Parkplatz ②</strong> – Asphaltierter Platz direkt bei XAL → Bodenbeschriftung beachten!</li>
|
||||
<li><strong>Option ③</strong> – Parkplätze an der Mur, falls ① und ② voll sind</li>
|
||||
<li><strong>Mitarbeiterparkplatz</strong> – Backup: Am Freitag noch offen, am Samstag zu. In beiden Fällen kurz bei uns melden.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ornament">✦ ✦ ✦</div>
|
||||
<p style="text-align:center; font-style:italic; color:#5a3a10;">Nach der Ankunft einfach in den <strong>XAL Park</strong> (grün markiert) – dort warten kühle Biere und der Überblick.</p>
|
||||
</div>
|
||||
|
||||
<!-- ANREISE -->
|
||||
<div class="page-break-before"></div>
|
||||
<div class="parchment">
|
||||
<div class="section-title">Anreise & Autos</div>
|
||||
<div class="section-subtitle">Die Gefährten reisen an</div>
|
||||
|
||||
<p>Die Autos fahren los sobald sie voll sind.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Auto</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Auto 1 – Orga</strong></td>
|
||||
<td>Fährt vorab zur Unterkunft und bereitet alles vor Ort vor (max. 7 Personen)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Auto 2 – Einkauf</strong></td>
|
||||
<td>Macht auf dem Weg einen Stopp in <strong>Ptuj</strong> zum Einkaufen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Marco & Gerry</strong></td>
|
||||
<td>Fahren separat – hier gibt es noch freie Plätze für den Rest!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Auto Wendl</strong></td>
|
||||
<td>Abfahrt <strong>11:00 Uhr</strong> in Riegersburg → Ankunft XAL ~12:00 Uhr (nimmt 2–3 Personen mit) → geplante Ankunft Unterkunft: <strong>14:00 Uhr</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- WAS ERWARTET EUCH -->
|
||||
<div class="parchment">
|
||||
<div class="section-title">Das Abenteuer</div>
|
||||
<div class="section-subtitle">Was erwartet euch?</div>
|
||||
|
||||
<div class="flavor-text">
|
||||
„Wendl erlebt ein Abenteuer, bei dem er verschiedene Aufgaben lösen muss, um seine entführte Geliebte zu retten."
|
||||
</div>
|
||||
|
||||
<p>Das Setting ist eine <strong>Taverne</strong> – Wendl ist der reisende Held, alle anderen sind das umtriebige Tavernenvolk: Wirte, Händler, Wahrsager und allerlei zwielichtige Gestalten. Jeder bringt eine eigene Geschichte mit – und den einen oder anderen Quest für Wendl.</p>
|
||||
|
||||
<p>Es steht jedem frei, das mehr oder weniger ernst zu nehmen. Zugewiesene Rollen und fixe Quests erfahrt ihr am Treffpunkt.</p>
|
||||
|
||||
<div class="rules-box">
|
||||
<div class="rules-title">Quests & Mitmachen</div>
|
||||
<ul class="rules-list">
|
||||
<li>Manche Leute haben bereits <strong>fixe Quests</strong> – sie wissen wer sie sind</li>
|
||||
<li>Es gibt für ein paar Leute <strong>Vorschläge</strong>, oder man überlegt sich spontan etwas</li>
|
||||
<li>Alles <strong>optional</strong> – jeder kann mitmachen, keiner muss</li>
|
||||
<li>Je mehr mitmachen, desto lustiger wird es natürlich</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rules-box">
|
||||
<div class="rules-title">Outfit</div>
|
||||
<ul class="rules-list">
|
||||
<li>Wer möchte, darf gerne im <strong>Fantasy / Mittelalter Vibe</strong> erscheinen</li>
|
||||
<li>Kein Muss – aber natürlich ein großes Plus für die Stimmung!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ornament">✦ ✦ ✦</div>
|
||||
</div>
|
||||
|
||||
<!-- TIMETABLE -->
|
||||
<div class="page-break-before"></div>
|
||||
<div class="parchment">
|
||||
<div class="section-title">Timetable</div>
|
||||
<div class="section-subtitle">Der grobe Fahrplan des Tages</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">12:00</div>
|
||||
<div class="timeline-event">Aufbau & Vorbereitung</div>
|
||||
<div class="timeline-note">Auto 1 kommt an und richtet alles her.</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">14:00</div>
|
||||
<div class="timeline-event">Wendl kommt an ⚔</div>
|
||||
<div class="timeline-note">Erstes Essen, Begrüßung & Erklärung des Ablaufs – während Wendl von jemandem abgelenkt bzw. verkleidet wird.</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">Nachmittag</div>
|
||||
<div class="timeline-event">Prüfungen & Quests</div>
|
||||
<div class="timeline-note">Wendl löst Quests, allgemeines Umschwemmen & mehr.</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">~21:00 <em style="font-size:0.85em;">(nicht fix)</em></div>
|
||||
<div class="timeline-event">Grillen / Abendessen</div>
|
||||
<div class="timeline-note">Essen, durchatmen, Kräfte sammeln.</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">Nach dem Essen</div>
|
||||
<div class="timeline-event">Tabletop-Kampf ⚔</div>
|
||||
<div class="timeline-note">Die große Herausforderung beginnt.</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-time">Großes Finale</div>
|
||||
<div class="timeline-event">Enthüllung des Bösewichts</div>
|
||||
<div class="timeline-note">In einer Werwolf-Runde wird der Komplize enttarnt – und Iris befreit.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ornament">✦ ✦ ✦</div>
|
||||
<p style="text-align:center; font-style:italic; color:#5a3a10;">Zeiten sind Richtwerte – die Stimmung gibt den Takt vor.</p>
|
||||
</div>
|
||||
|
||||
<!-- TAG 2 & ESSEN -->
|
||||
<div class="parchment">
|
||||
<div class="section-title">Zweiter Tag & Essen</div>
|
||||
<div class="section-subtitle">Wichtige Infos</div>
|
||||
|
||||
<div class="rules-box">
|
||||
<div class="rules-title">Zweiter Tag – Abreise</div>
|
||||
<ul class="rules-list">
|
||||
<li>Abreise bis spätestens <strong>11:30 Uhr</strong></li>
|
||||
<li>Rückfahrt wieder nach <strong>Graz</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rules-box">
|
||||
<div class="rules-title">Essen & Allergien</div>
|
||||
<ul class="rules-list">
|
||||
<li>Das Essen wird <strong>unterwegs eingekauft</strong></li>
|
||||
<li>Am <strong>Freitag in der Früh</strong> kommt eine Umfrage zu Ernährungsweisen und Allergien – bitte rechtzeitig ausfüllen!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ornament">✦ ✦ ✦</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user