222 lines
10 KiB
HTML
222 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Hinweiskarten – JGA Wendl · Im Jahre Schnee</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&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: #9a7b1e;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
background: #0d0800;
|
||
font-family: 'Crimson Pro', Georgia, serif;
|
||
color: var(--ink);
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.page-head { text-align: center; color: var(--gold); margin-bottom: 1.4rem; }
|
||
.page-head .kicker {
|
||
font-family: 'Cinzel', serif; letter-spacing: 0.4em; font-size: 0.75rem;
|
||
text-transform: uppercase; color: #c8a86a;
|
||
}
|
||
.page-head h1 {
|
||
font-family: 'Cinzel Decorative', serif; font-size: 2rem; color: #f0c94a;
|
||
text-shadow: 0 0 20px rgba(201,162,39,0.5); margin: 0.3rem 0;
|
||
}
|
||
.page-head p { color: #c8a86a; font-style: italic; font-size: 0.95rem; }
|
||
.print-hint { text-align: center; color: #8a7340; font-size: 0.8rem; margin-bottom: 1.6rem; }
|
||
|
||
.section-label {
|
||
max-width: 1100px; margin: 2.2rem auto 0.6rem;
|
||
font-family: 'Cinzel', serif; color: #c8a86a; letter-spacing: 0.25em;
|
||
text-transform: uppercase; font-size: 0.85rem;
|
||
border-bottom: 1px solid rgba(201,162,39,0.3); padding-bottom: 0.3rem;
|
||
}
|
||
|
||
.grid {
|
||
max-width: 1100px; margin: 0 auto;
|
||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
|
||
}
|
||
|
||
.hint {
|
||
background:
|
||
radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.45) 0%, transparent 55%),
|
||
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
|
||
border: 2px solid #5a3a00;
|
||
border-radius: 8px;
|
||
padding: 0.9rem 1.1rem 1.1rem;
|
||
position: relative;
|
||
min-height: 6.6cm;
|
||
display: flex; flex-direction: column;
|
||
box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 0 40px rgba(120,80,20,0.12);
|
||
break-inside: avoid;
|
||
}
|
||
.hint::after {
|
||
content: ''; position: absolute; inset: 5px;
|
||
border: 1px solid rgba(90,58,0,0.35); border-radius: 5px; pointer-events: none;
|
||
}
|
||
|
||
.hint-top {
|
||
display: flex; align-items: center; gap: 0.6rem;
|
||
border-bottom: 2px solid #5a3a00; padding-bottom: 0.5rem; margin-bottom: 0.6rem;
|
||
}
|
||
.hint-top .seal { font-size: 1.7rem; line-height: 1; }
|
||
.hint-title {
|
||
font-family: 'Cinzel Decorative', serif; font-size: 1.15rem; color: var(--red);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.hint-kicker {
|
||
margin-left: auto; font-family: 'Cinzel', serif; font-size: 0.6rem;
|
||
letter-spacing: 0.18em; text-transform: uppercase; color: #8a7340;
|
||
}
|
||
|
||
/* Blanko-Schreiblinien */
|
||
.lines { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 0.3rem 0; }
|
||
.lines .line { border-bottom: 1px solid rgba(90,58,0,0.4); height: 1.45rem; }
|
||
|
||
/* Vorgefüllter Text */
|
||
.hint-body {
|
||
flex: 1; display: flex; align-items: center;
|
||
}
|
||
.hint-body p {
|
||
margin: 0;
|
||
font-size: 1.1rem; line-height: 1.5; color: var(--ink);
|
||
font-family: 'Crimson Pro', Georgia, serif; font-weight: 500;
|
||
}
|
||
.hint-body em { color: var(--red); font-style: italic; font-weight: 600; }
|
||
|
||
.hint-foot {
|
||
margin-top: 0.6rem; text-align: center;
|
||
font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.2em;
|
||
text-transform: uppercase; color: #8a7340;
|
||
}
|
||
.hint-foot .src { display:block; color: var(--gold); margin-top: 0.15rem; font-size:0.62rem; letter-spacing:0.1em; }
|
||
|
||
@media print {
|
||
body { background: #fff; padding: 0; color: #000; }
|
||
.page-head, .print-hint { display: none; }
|
||
.grid { gap: 0.5cm; max-width: none; }
|
||
.section-label { color: #5a3a00; break-before: page; margin-top: 0; }
|
||
.section-label:first-of-type { break-before: avoid; }
|
||
.hint { box-shadow: none; border-color: #000; }
|
||
}
|
||
@page { size: A4 portrait; margin: 1cm; }
|
||
|
||
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-head">
|
||
<div class="kicker">Im Jahre Schnee</div>
|
||
<h1>🃏 Hinweiskarten ⚜</h1>
|
||
<p>Futter fürs Werwolf-Finale — jede Karte zeigt am Ende auf den Höschenhändler.</p>
|
||
</div>
|
||
<div class="print-hint">Zum Drucken: Strg/Cmd + P → A4 hochkant. Karten ausschneiden. Die <strong>Blanko-Karten</strong> vor Ort von Hand beschriften (je nachdem, welcher Hinweis grad passt). Die <strong>Beispiele</strong> kannst du direkt verwenden oder als Spickzettel nehmen.</div>
|
||
|
||
<div class="section-label">Blanko — vor Ort von Hand beschriften</div>
|
||
<div class="grid">
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📜</span><span class="hint-title">Hinweis</span><span class="hint-kicker">Nr. ____</span></div>
|
||
<div class="lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>
|
||
<div class="hint-foot">Im Jahre Schnee · für Wendl</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="section-label">Beispiele — die echten Tages-Hinweise (alle zeigen auf den Höschenhändler)</div>
|
||
<div class="grid">
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">👕</span><span class="hint-title">Hinweis</span><span class="hint-kicker">⑥ Bluse</span></div>
|
||
<div class="hint-body"><p>Die „Iris-Bluse“ ist gefälscht — und ihre Farbe <em>färbt ab</em>. Wer sie verkauft hat, trägt den Fleck.</p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Die gekaufte Bluse</span></div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">🤲</span><span class="hint-title">Hinweis</span><span class="hint-kicker">⑧ Zeuge</span></div>
|
||
<div class="hint-body"><p>Ein stummer Zeuge deutet es: <em>ein Mann mit einem Korb voll Wäsche</em> trieb sich herum.</p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Der stumme Zeuge</span></div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">🍷</span><span class="hint-title">Hinweis</span><span class="hint-kicker">③ Kev</span></div>
|
||
<div class="hint-body"><p>Kev erinnert sich nach seiner Genesung: Er sah <em>einen fahrenden Händler</em> in der Nacht der Entführung.</p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Der genesene Säufer</span></div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">📡</span><span class="hint-title">Hinweis</span><span class="hint-kicker">⑨ Morse</span></div>
|
||
<div class="hint-body"><p>Der entschlüsselte Brief nennt das <em>falsche Kleidungsstück</em> als Köder — gekauft beim Händler.</p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Der verschlüsselte Brief</span></div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">🍻</span><span class="hint-title">Hinweis</span><span class="hint-kicker">⑤ Pub-Quiz</span></div>
|
||
<div class="hint-body"><p>Der Stammtisch flüstert: <em>Wer Falsches verkauft, trägt Flecken.</em></p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Pub-Quiz (Belohnung)</span></div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<div class="hint-top"><span class="seal">🐴</span><span class="hint-title">Hinweis</span><span class="hint-kicker">⑩ Luki</span></div>
|
||
<div class="hint-body"><p>Luki dankt es Wendl: Der Händler mit dem Wäschekorb <em>roch nach Grillhendl</em> — wie die Flecken auf der Bluse.</p></div>
|
||
<div class="hint-foot">Im Jahre Schnee<span class="src">aus: Lukis Lutschstein</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|