From 0ab3d530237d303acaaf35d1ae3f4ae5bd5c301e Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Fri, 9 Oct 2026 22:14:01 +0200
Subject: [PATCH] update

---
 backend/horror.db.bak                     | Bin 22962176 -> 22978560 bytes
 frontend/src/components/Einladung.vue     | 393 +++++++++++++---------
 frontend/src/components/VerwaltungTab.vue | 168 +++++----
 3 files changed, 335 insertions(+), 226 deletions(-)

diff --git a/backend/horror.db.bak b/backend/horror.db.bak
index cfad6827c9557693428b9b1529afdf8915d08e3f..508bfc7cb60b0326d96472a4ebaa477cc1b5f49c 100644
GIT binary patch
delta 4276
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

delta 2462
zcmajh2~<>79Dwn6=gq<l!(32N2-8t9BtpkwU}RhnLo{;?aiO9T6wDS2%)%CnQY)<-
zlZrN*%68MV#VISFW@Xu??W^spm9}RaeSe^n);Trj{JuBm%{_1Ct#_I?{o-lfwAZsN
zE8TAx>7N*XzZ7rn@$*MaRavbSHM*PfudBJKw^!e5n0kq!m*`zOv18Bd<CNuJma1Bu
zor~5z@AcT*vSiSJ*3Gka_HTJ@P`=aDTMWJPzSO`XEn5mL*iv%QmJ$UUOxWRo6D}md
z4G)sxMGAb-NJSdDpewo|9o^9b8OX!|$U;vXh+gOoKl-3A`XL+raS(Da0J%6Ac{l|5
z7>Gd#U@(FxKnR5>LKs6(j0lEe7=~j6WZy@k6r*q`$}k$`7=y7m4C8P(#v_UeI06-z
zh)PVtWK6+SRN+V*g`-i8V{j~v!!*>O7Sk~Ub*RTo9FJKz0Vm=loQ&Bx1*f6`jhKVe
zFc+ue3^ZXL&cs<b8|Pp?&c%6X#`(Aa3$PH2a3L<j#aN6bxCEEtGAu<5%WyfCqXk#s
zN?e6jT#ajREw01$Sb-Z5$BnoNH)ADk!L7Irx8n}niMy~0cVjiy;2x~SI^2u<a6cZv
zdL-~59>NAZj7RV&Hp0RtY{p~Qg2(X$p2Su>g{QF%&)``+hv)GEwqplg#7lS?ui#a@
zhS%{1-o#sY8}DEz-o<-(A0OaDe1wnj2|mSV_#9tg7rw+-_!_&h2jAdZe24Gx1AfF$
z_!)cg3x36K_#J<s?Go<&7$i1{DX~i&5~su^Ns_oF9!avqD@l>~BwCWHES?9dw86~q
zxZ<w0X)0j4+*_?Q9!xiPJecy#$cQX^RF%|+3xjo`y861pqEILtE-o$%O%I0y#o@wm
z{frsY!?s``Sd<?q&JPZm94v?o4n+!z;-wqXRH3JRMIaan6~&raLApq~O1eqXCEX=G
zBpH%SWi@X&KrI|SFvGjpNExM<>wdlyQ-1Z0_Qibn>x6#W`?K$jlyyFT%B6a?ca8TY
z-yhz^dhDZ-EcI}*JWa39&Nid!|9*FDwKq$Vo{|G4y(GOQen}rmUr9enwxqx0AW4p7
zfFxIPuq01%h$LS!P%=mokPMatB?Xd@q)<{M2}_1ZiX{<ct@aL8iwf*X)%LXZ6Vt~Y
zt126+$S}!p$p{HoM^)KKNvX1`%0?+GZ{IW7;*?3GCbnw+C`AsHlu1TQ$|YkYV<m?v
zYt{U5YU-R!{fOb#bvFHh-lo^+75Wvun>lQruG@dx34iL)bX&JBUNcuU)y|zUtG;g9
ztoqtHb5C=`=e3Pf*~%SX!LpY(lljrtIbFuLvMNWpV!K(A!&Q8D+jy0ecyasd)BiC+
zCOD-W)NMK{nIJhrQX!eBtZlkdMb@gWamS`gmD^fcqX%2lcpFQ$mSvQyr)^f^`AQYt
z?6T>FhF++x(z}K$%dzh)oMW29Y-T*}nWFkycg82F>Iz0LH@MoY#-1D<bKlYR4!c}n
z@mkJ?KeoPYk|L9pwZ3hNny|LJ+gWYst|{Y_ukchR?Qw;iyPPYX)$K>E)R|oFPBN4c
zb*Gn@@hCTie?VhX{mlLEp+Et*OkN-m2?WZM{u*xo&*6cN;bUAK!+VrCI)>*qHqC5m
z{MY6Sf*s=*6g%C9+lZ<~XU0o!nW*~4Y7<ixsgfKiIZ9cziKErZJ2)ce7<!{_-BB^F
zaNpz6;*^V^yUjh);WSj#-MMGEnH~2(JJb1XBh8M_ZSB7;H}$X2gPl9Ow4qupZ8%14
qY&cfgxAT498hS5(nr@u%#C|6r=Fm>Nax2r(zOb1dOQm*EZTe3pn5-25

diff --git a/frontend/src/components/Einladung.vue b/frontend/src/components/Einladung.vue
index 7f1a918..98c7825 100644
--- a/frontend/src/components/Einladung.vue
+++ b/frontend/src/components/Einladung.vue
@@ -1,14 +1,13 @@
 <script setup>
-// Eine Einladungskarte zum Verschicken: Datum, Uhrzeit, Ort, der gezogene
-// Film — als Bild fürs Handy. Zwei Designs: Horror und kein Horror. Das
-// Bild entsteht hier im Browser auf einem Canvas, der Host lädt es
-// herunter und schickt es selbst herum.
+// Eine Einladungskarte zum Verschicken: Titel, Datum, Uhrzeit, Genre, Ort,
+// Adresse der Seite — als Bild fürs Handy. Zwei Designs: Horror und kein
+// Horror. Jede Zeile ist ein Textfeld. Das Bild entsteht hier im Browser
+// auf einem Canvas, der Host lädt es herunter und schickt es selbst herum.
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import { posterUrl } from '../images'
 
 const emit = defineEmits(['zu'])
 
-const GEMERKT = 'filmabend_einladung'
+const GEMERKT = 'filmabend_karte'
 const B = 1080
 const H = 1350
 
@@ -23,9 +22,9 @@ const form = reactive({
   titel: 'Filmabend',
   datum: naechsterMittwoch(),
   uhrzeit: '20:00',
-  ort: '',
-  satz: 'Bring was zu knabbern mit.',
-  filmZeigen: true,
+  genre: 'Horror',
+  ort: 'Bananarama - Wohnzimmer',
+  url: 'horror.marha.de',
 })
 
 try {
@@ -34,35 +33,11 @@ try {
   // Kaputte Erinnerung — dann eben die Vorgaben
 }
 
-// Der gezogene Film vom Rad, falls es einen gibt
-const film = ref(null)
-let poster = null
 const leinwand = ref(null)
 
-async function filmLaden() {
-  try {
-    const resp = await fetch('/api/spin')
-    const daten = resp.ok ? await resp.json() : null
-    film.value = daten?.result?.gewinner || null
-  } catch {
-    film.value = null
-  }
-}
-
-async function posterLaden() {
-  poster = null
-  const pfad = film.value?.poster_path
-  if (!pfad) return
-  const bild = new Image()
-  // Sonst darf das Canvas nicht als Bild gespeichert werden
-  bild.crossOrigin = 'anonymous'
-  bild.src = posterUrl(pfad, 'w500')
-  try {
-    await bild.decode()
-    poster = bild
-  } catch {
-    poster = null
-  }
+function stilWaehlen(stil) {
+  form.stil = stil
+  form.genre = stil === 'horror' ? 'Horror' : 'Kein Horror'
 }
 
 // ── Malen ───────────────────────────────────────────────────────────
@@ -100,117 +75,242 @@ function rundeck(ctx, x, y, b, h, r) {
   ctx.closePath()
 }
 
+// Feste Zufallsfolge: Körnung und Spritzer bleiben bei jedem Tastendruck gleich
+function zufall(saat) {
+  let z = saat
+  return () => {
+    z = (z * 1664525 + 1013904223) % 4294967296
+    return z / 4294967296
+  }
+}
+
+const SCHRIFT = 'system-ui, -apple-system, "Segoe UI", sans-serif'
+
+const FARBEN = {
+  horror: { text: '#f1ecec', leise: '#9a8f92', akzent: '#e50914' },
+  nett: { text: '#1b2a41', leise: '#7d6b50', akzent: '#e0532f' },
+}
+
+// ── Horror: Dunkelheit, Körnung, Spinnennetz, Blut ──────────────────
+function spinnennetz(ctx, cx, cy, radius, von, bis) {
+  ctx.save()
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.26)'
+  ctx.lineWidth = 2
+  const speichen = 7
+  const winkel = []
+  for (let i = 0; i <= speichen; i++) winkel.push(von + ((bis - von) * i) / speichen)
+  for (const w of winkel) {
+    ctx.beginPath()
+    ctx.moveTo(cx, cy)
+    ctx.lineTo(cx + Math.cos(w) * radius, cy + Math.sin(w) * radius)
+    ctx.stroke()
+  }
+  // Die Querfäden hängen leicht durch
+  for (let r = radius / 6; r <= radius; r += radius / 6) {
+    ctx.beginPath()
+    winkel.forEach((w, i) => {
+      const x = cx + Math.cos(w) * r
+      const y = cy + Math.sin(w) * r
+      if (i === 0) return ctx.moveTo(x, y)
+      const m = (winkel[i - 1] + w) / 2
+      ctx.quadraticCurveTo(cx + Math.cos(m) * r * 0.9, cy + Math.sin(m) * r * 0.9, x, y)
+    })
+    ctx.stroke()
+  }
+  ctx.restore()
+}
+
+function blut(ctx) {
+  ctx.fillStyle = '#b3060f'
+  ctx.fillRect(0, 0, B, 30)
+  const tropfen = [
+    [50, 70, 16],
+    [150, 140, 22],
+    [230, 50, 14],
+    [330, 180, 26],
+    [430, 90, 18],
+    [520, 220, 24],
+    [640, 60, 16],
+    [720, 150, 20],
+    [820, 110, 22],
+    [910, 200, 26],
+    [1000, 80, 18],
+  ]
+  for (const [x, laenge, breite] of tropfen) {
+    rundeck(ctx, x - breite / 2, 10, breite, laenge, breite / 2)
+    ctx.fill()
+    ctx.beginPath()
+    ctx.arc(x, 10 + laenge, breite * 0.7, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  const r = zufall(3)
+  for (let i = 0; i < 40; i++) {
+    ctx.beginPath()
+    ctx.arc(r() * B, 30 + r() * 260, 2 + r() * 5, 0, Math.PI * 2)
+    ctx.fill()
+  }
+}
+
+function horrorHintergrund(ctx) {
+  ctx.fillStyle = '#07060a'
+  ctx.fillRect(0, 0, B, H)
+  const glut = ctx.createRadialGradient(B / 2, H * 0.55, 60, B / 2, H * 0.55, H * 0.75)
+  glut.addColorStop(0, 'rgba(150, 10, 20, 0.35)')
+  glut.addColorStop(1, 'rgba(0, 0, 0, 0)')
+  ctx.fillStyle = glut
+  ctx.fillRect(0, 0, B, H)
+  const r = zufall(7)
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
+  for (let i = 0; i < 6000; i++) ctx.fillRect(r() * B, r() * H, 2, 2)
+  const rand = ctx.createRadialGradient(B / 2, H / 2, H * 0.35, B / 2, H / 2, H * 0.85)
+  rand.addColorStop(0, 'rgba(0, 0, 0, 0)')
+  rand.addColorStop(1, 'rgba(0, 0, 0, 0.85)')
+  ctx.fillStyle = rand
+  ctx.fillRect(0, 0, B, H)
+  spinnennetz(ctx, B, 0, 380, Math.PI / 2, Math.PI)
+  spinnennetz(ctx, 0, H, 300, -Math.PI / 2, 0)
+  blut(ctx)
+  // Ein dünner Strich zwischen Wann und Was
+  ctx.fillStyle = 'rgba(229, 9, 20, 0.5)'
+  ctx.fillRect(300, 670, B - 600, 2)
+}
+
+// ── Kein Horror: ein Kinoticket auf einer Markise ───────────────────
+const TICKET = { x: 70, y: 90, b: B - 140, h: H - 180, r: 36 }
+
+function filmstreifen(ctx, y) {
+  ctx.fillStyle = FARBEN.nett.text
+  ctx.fillRect(TICKET.x, y, TICKET.b, 70)
+  ctx.fillStyle = '#fff4dc'
+  for (let x = TICKET.x + 30; x < TICKET.x + TICKET.b - 30; x += 70) {
+    rundeck(ctx, x, y + 20, 36, 30, 6)
+    ctx.fill()
+  }
+}
+
+function nettHintergrund(ctx) {
+  // Markise: schräge Streifen
+  ctx.fillStyle = '#f2bd3a'
+  ctx.fillRect(0, 0, B, H)
+  ctx.save()
+  ctx.translate(B / 2, H / 2)
+  ctx.rotate(-Math.PI / 4)
+  ctx.fillStyle = '#e9b02c'
+  for (let x = -H; x < H; x += 80) ctx.fillRect(x, -H, 40, 2 * H)
+  ctx.restore()
+
+  // Das Ticket mit Schatten
+  ctx.save()
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
+  ctx.shadowBlur = 40
+  ctx.shadowOffsetY = 16
+  ctx.fillStyle = '#fff4dc'
+  rundeck(ctx, TICKET.x, TICKET.y, TICKET.b, TICKET.h, TICKET.r)
+  ctx.fill()
+  ctx.restore()
+
+  ctx.save()
+  rundeck(ctx, TICKET.x, TICKET.y, TICKET.b, TICKET.h, TICKET.r)
+  ctx.clip()
+  filmstreifen(ctx, TICKET.y)
+  filmstreifen(ctx, TICKET.y + TICKET.h - 70)
+  ctx.restore()
+
+  // Abrisskante mit Kerben
+  const ky = 670
+  ctx.fillStyle = '#f2bd3a'
+  for (const x of [TICKET.x, TICKET.x + TICKET.b]) {
+    ctx.beginPath()
+    ctx.arc(x, ky, 36, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  ctx.save()
+  ctx.strokeStyle = FARBEN.nett.text
+  ctx.globalAlpha = 0.35
+  ctx.lineWidth = 4
+  ctx.setLineDash([18, 14])
+  ctx.beginPath()
+  ctx.moveTo(TICKET.x + 60, ky)
+  ctx.lineTo(TICKET.x + TICKET.b - 60, ky)
+  ctx.stroke()
+  ctx.restore()
+}
+
+// ── Text ────────────────────────────────────────────────────────────
+function stempel(ctx, text, y, farbe) {
+  ctx.save()
+  ctx.translate(B / 2, y)
+  ctx.rotate(-0.06)
+  ctx.font = `bold 58px ${SCHRIFT}`
+  ctx.letterSpacing = '6px'
+  ctx.textBaseline = 'middle'
+  const breite = Math.min(ctx.measureText(text).width + 70, B - 160)
+  ctx.strokeStyle = farbe
+  ctx.lineWidth = 6
+  rundeck(ctx, -breite / 2, -52, breite, 96, 12)
+  ctx.stroke()
+  ctx.fillStyle = farbe
+  ctx.fillText(text, 3, 2, breite - 40)
+  ctx.restore()
+}
+
 function malen() {
   const ctx = leinwand.value?.getContext('2d')
   if (!ctx) return
   const horror = form.stil === 'horror'
-  const farbe = {
-    hintergrund: horror ? '#0b0b0d' : '#ffe9cf',
-    text: horror ? '#f1f1f3' : '#3b2a1a',
-    leise: horror ? '#9a9aa3' : '#8a6d52',
-    akzent: horror ? '#e50914' : '#e8891d',
-  }
-  const schrift = 'system-ui, -apple-system, "Segoe UI", sans-serif'
-
-  // Hintergrund mit sanftem Lichtfleck
-  ctx.fillStyle = farbe.hintergrund
-  ctx.fillRect(0, 0, B, H)
-  const licht = ctx.createRadialGradient(B / 2, H * 0.45, 80, B / 2, H * 0.45, H * 0.8)
-  licht.addColorStop(0, horror ? 'rgba(229, 9, 20, 0.14)' : 'rgba(255, 250, 240, 0.9)')
-  licht.addColorStop(1, 'rgba(0, 0, 0, 0)')
-  ctx.fillStyle = licht
-  ctx.fillRect(0, 0, B, H)
-
-  if (horror) {
-    // Blut läuft von oben herunter
-    ctx.fillStyle = farbe.akzent
-    ctx.fillRect(0, 0, B, 26)
-    const tropfen = [60, 180, 250, 390, 520, 610, 760, 840, 960, 1030]
-    tropfen.forEach((x, i) => {
-      const laenge = [60, 100, 40, 120, 70, 130, 50, 110, 90, 60][i]
-      rundeck(ctx, x - 9, 10, 18, laenge, 9)
-      ctx.fill()
-    })
-  } else {
-    // Ein Rahmen wie eine Kinokarte
-    ctx.strokeStyle = farbe.akzent
-    ctx.lineWidth = 6
-    ctx.setLineDash([22, 14])
-    rundeck(ctx, 40, 40, B - 80, H - 80, 28)
-    ctx.stroke()
-    ctx.setLineDash([])
-  }
+  const farbe = FARBEN[form.stil]
+  if (horror) horrorHintergrund(ctx)
+  else nettHintergrund(ctx)
 
   ctx.textAlign = 'center'
   ctx.textBaseline = 'alphabetic'
 
   // Überschrift
+  ctx.save()
+  if (horror) {
+    ctx.shadowColor = 'rgba(229, 9, 20, 0.7)'
+    ctx.shadowBlur = 40
+  }
   ctx.fillStyle = horror ? farbe.akzent : farbe.text
-  ctx.font = `bold 104px ${schrift}`
-  ctx.letterSpacing = horror ? '8px' : '2px'
+  ctx.font = `bold 104px ${SCHRIFT}`
+  ctx.letterSpacing = horror ? '10px' : '2px'
   const titel = horror ? form.titel.toUpperCase() : form.titel
-  ctx.fillText(titel, B / 2, 265, B - 120)
-  ctx.letterSpacing = '0px'
+  ctx.fillText(titel, B / 2, 440, B - 160)
+  ctx.restore()
 
-  // Wann und wo
+  // Wann
   ctx.fillStyle = farbe.text
-  ctx.font = `600 46px ${schrift}`
-  ctx.fillText(datumText(), B / 2, 345, B - 120)
+  ctx.font = `600 50px ${SCHRIFT}`
+  ctx.fillText(datumText(), B / 2, 540, B - 160)
   ctx.fillStyle = farbe.leise
-  ctx.font = `40px ${schrift}`
-  const wo = [form.uhrzeit && `${form.uhrzeit} Uhr`, form.ort].filter(Boolean).join(' · ')
-  ctx.fillText(wo, B / 2, 400, B - 120)
+  ctx.font = `42px ${SCHRIFT}`
+  if (form.uhrzeit) ctx.fillText(`${form.uhrzeit} Uhr`, B / 2, 600, B - 160)
 
-  // Der Film: Poster oder Überraschung
-  const pb = 420
-  const ph = 630
-  const px = (B - pb) / 2
-  const py = 460
-  if (form.filmZeigen && film.value) {
-    if (poster) {
-      ctx.save()
-      rundeck(ctx, px, py, pb, ph, horror ? 6 : 24)
-      ctx.clip()
-      ctx.drawImage(poster, px, py, pb, ph)
-      if (horror) {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'
-        ctx.fillRect(px, py, pb, ph)
-      }
-      ctx.restore()
-      ctx.strokeStyle = farbe.akzent
-      ctx.lineWidth = horror ? 4 : 8
-      rundeck(ctx, px, py, pb, ph, horror ? 6 : 24)
-      ctx.stroke()
-    }
-    ctx.fillStyle = farbe.text
-    ctx.font = `bold 54px ${schrift}`
-    const name = film.value.year ? `${film.value.title} (${film.value.year})` : film.value.title
-    let y = poster ? py + ph + 80 : 700
-    for (const z of zeilen(ctx, name, B - 160)) {
-      ctx.fillText(z, B / 2, y)
-      y += 64
-    }
-  } else {
+  // Genre als Stempel
+  stempel(ctx, form.genre.toUpperCase(), 770, farbe.akzent)
+
+  // Kleine Titel über Discord und Webseite
+  const titelZeile = (text, y) => {
     ctx.fillStyle = farbe.leise
-    ctx.font = `600 54px ${schrift}`
-    ctx.fillText('Film wird ausgelost', B / 2, 760)
-    ctx.font = `44px ${schrift}`
-    ctx.fillText('Vorschläge aufs Rad!', B / 2, 830)
+    ctx.font = `600 30px ${SCHRIFT}`
+    ctx.letterSpacing = '4px'
+    ctx.fillText(text, B / 2, y)
+    ctx.letterSpacing = '0px'
   }
 
-  // Der freie Satz
+  titelZeile('DISCORD', 890)
   ctx.fillStyle = farbe.text
-  ctx.font = `44px ${schrift}`
-  let y = 1215
-  for (const z of zeilen(ctx, form.satz, B - 160)) {
+  ctx.font = `46px ${SCHRIFT}`
+  let y = 950
+  for (const z of zeilen(ctx, form.ort, B - 200)) {
     ctx.fillText(z, B / 2, y)
-    y += 54
+    y += 56
   }
 
-  // Wo man die Seite findet
-  ctx.fillStyle = farbe.leise
-  ctx.font = `34px ${schrift}`
-  ctx.fillText(location.host, B / 2, H - 50)
+  titelZeile('WEBSEITE', y + 50)
+  ctx.fillStyle = farbe.text
+  ctx.font = `48px ${SCHRIFT}`
+  ctx.fillText(form.url, B / 2, y + 110, B - 200)
 }
 
 function speichern() {
@@ -233,12 +333,9 @@ function escape(e) {
   if (e.key === 'Escape') emit('zu')
 }
 
-onMounted(async () => {
+onMounted(() => {
   window.addEventListener('keydown', escape)
   malen()
-  await filmLaden()
-  await posterLaden()
-  malen()
 })
 
 onUnmounted(() => window.removeEventListener('keydown', escape))
@@ -254,11 +351,15 @@ onUnmounted(() => window.removeEventListener('keydown', escape))
             <button
               type="button"
               :class="{ an: form.stil === 'horror' }"
-              @click="form.stil = 'horror'"
+              @click="stilWaehlen('horror')"
             >
               Horror
             </button>
-            <button type="button" :class="{ an: form.stil === 'nett' }" @click="form.stil = 'nett'">
+            <button
+              type="button"
+              :class="{ an: form.stil === 'nett' }"
+              @click="stilWaehlen('nett')"
+            >
               Kein Horror
             </button>
           </div>
@@ -278,20 +379,17 @@ onUnmounted(() => window.removeEventListener('keydown', escape))
             </label>
           </div>
           <label>
-            Ort
-            <input v-model="form.ort" type="text" maxlength="60" placeholder="Bei Marek" />
+            Genre
+            <input v-model="form.genre" type="text" maxlength="24" />
           </label>
           <label>
-            Ein Satz
-            <input v-model="form.satz" type="text" maxlength="90" />
+            Discord
+            <input v-model="form.ort" type="text" maxlength="60" />
           </label>
-          <label v-if="film" class="haken">
-            <input v-model="form.filmZeigen" type="checkbox" />
-            Film zeigen: {{ film.title }}
+          <label>
+            Webseite
+            <input v-model="form.url" type="text" maxlength="60" />
           </label>
-          <p v-else class="hinweis">
-            Noch kein Film gezogen — die Karte sagt „Film wird ausgelost".
-          </p>
 
           <div class="fuss">
             <button type="button" class="speichern" @click="speichern">Als Bild speichern</button>
@@ -388,19 +486,6 @@ input[type='time'] {
   color-scheme: dark;
 }
 
-.haken {
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-  color: var(--text);
-  font-size: 0.9rem;
-}
-
-.hinweis {
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-
 .fuss {
   display: flex;
   gap: 0.5rem;
diff --git a/frontend/src/components/VerwaltungTab.vue b/frontend/src/components/VerwaltungTab.vue
index 3a08c58..31f831c 100644
--- a/frontend/src/components/VerwaltungTab.vue
+++ b/frontend/src/components/VerwaltungTab.vue
@@ -236,70 +236,72 @@ async function entfernen(user) {
       <p v-else class="leer">Noch niemand in der Runde.</p>
     </section>
 
-    <section v-if="host" class="einladung">
-      <h3>Einladung</h3>
-      <p class="erklaerung">
-        Eine Karte zum Verschicken: Datum, Ort, der gezogene Film. Als Bild fürs Handy.
-      </p>
-      <button type="button" class="klein" @click="einladung = true">Einladung erstellen</button>
-    </section>
-    <Einladung v-if="einladung" @zu="einladung = false" />
+    <div v-if="host" class="rechts">
+      <section class="einladung">
+        <h3>Einladung</h3>
+        <p class="erklaerung">
+          Eine Karte zum Verschicken: Datum, Genre, Discord, Webseite. Als Bild fürs Handy.
+        </p>
+        <button type="button" class="klein" @click="einladung = true">Einladung erstellen</button>
+      </section>
+      <Einladung v-if="einladung" @zu="einladung = false" />
 
-    <section v-if="host" class="hostfilm">
-      <h3>Host-Film</h3>
-      <p class="erklaerung">
-        Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist Host
-        — ohne Link.
-      </p>
-      <div class="zeile">
-        <button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
-        <button type="button" class="klein" title="Anzeigen" @click="hostFilmZeigen">👁</button>
-        <button type="button" class="klein" @click="hostFilmSetzen(null)">Aufheben</button>
-        <span v-if="hostFilm" class="film-anzeige">
-          <template v-if="hostFilm.laden">…</template>
-          <template v-else-if="hostFilm.fehler">nicht lesbar</template>
-          <template v-else-if="hostFilm.film"
-            >{{ hostFilm.film.title }} ({{ hostFilm.film.year }})</template
-          >
-          <template v-else>keiner gesetzt</template>
-        </span>
-      </div>
-    </section>
+      <section class="hostfilm">
+        <h3>Host-Film</h3>
+        <p class="erklaerung">
+          Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist
+          Host — ohne Link.
+        </p>
+        <div class="zeile">
+          <button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
+          <button type="button" class="klein" title="Anzeigen" @click="hostFilmZeigen">👁</button>
+          <button type="button" class="klein" @click="hostFilmSetzen(null)">Aufheben</button>
+          <span v-if="hostFilm" class="film-anzeige">
+            <template v-if="hostFilm.laden">…</template>
+            <template v-else-if="hostFilm.fehler">nicht lesbar</template>
+            <template v-else-if="hostFilm.film"
+              >{{ hostFilm.film.title }} ({{ hostFilm.film.year }})</template
+            >
+            <template v-else>keiner gesetzt</template>
+          </span>
+        </div>
+      </section>
 
-    <section v-if="host" class="aufnahmen">
-      <h3>Aufnahmen</h3>
-      <p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
-      <p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
-      <p v-else-if="!aufnahmen.length" class="leer">Keine Aufnahmen.</p>
-      <ul v-else>
-        <li v-for="s in aufnahmen" :key="s.start" class="zeile">
-          <span>
-            {{ aufnahmeText(s) }} ·
-            <strong v-if="s.film">{{ s.film.title }}</strong>
-            <em v-else>kein Film</em>
-          </span>
-          <span class="knoepfe">
-            <button type="button" class="klein" @click="filmDialogFuer = s.start">Film</button>
-            <button
-              v-if="s.zugewiesen"
-              type="button"
-              class="klein"
-              @click="filmZuweisen(s.start, null)"
-            >
-              Aufheben
-            </button>
-            <button
-              type="button"
-              class="klein"
-              :class="{ warnung: loeschFrage === s.start }"
-              @click="aufnahmeLoeschen(s)"
-            >
-              {{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
-            </button>
-          </span>
-        </li>
-      </ul>
-    </section>
+      <section class="aufnahmen">
+        <h3>Aufnahmen</h3>
+        <p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
+        <p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
+        <p v-else-if="!aufnahmen.length" class="leer">Keine Aufnahmen.</p>
+        <ul v-else>
+          <li v-for="s in aufnahmen" :key="s.start" class="zeile">
+            <span>
+              {{ aufnahmeText(s) }} ·
+              <strong v-if="s.film">{{ s.film.title }}</strong>
+              <em v-else>kein Film</em>
+            </span>
+            <span class="knoepfe">
+              <button type="button" class="klein" @click="filmDialogFuer = s.start">Film</button>
+              <button
+                v-if="s.zugewiesen"
+                type="button"
+                class="klein"
+                @click="filmZuweisen(s.start, null)"
+              >
+                Aufheben
+              </button>
+              <button
+                type="button"
+                class="klein"
+                :class="{ warnung: loeschFrage === s.start }"
+                @click="aufnahmeLoeschen(s)"
+              >
+                {{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
+              </button>
+            </span>
+          </li>
+        </ul>
+      </section>
+    </div>
 
     <Teleport to="body">
       <div v-if="filmDialogFuer" class="hintergrund" @click.self="filmDialogFuer = null">
@@ -361,7 +363,28 @@ async function entfernen(user) {
 
 <style scoped>
 .verwaltung-tab {
-  max-width: 34rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2.5rem 3.5rem;
+  align-items: start;
+  max-width: 72rem;
+}
+
+/* Mit Host-Rechten: Benutzer links, der Rest rechts */
+.verwaltung-tab:has(.rechts) {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.rechts {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+@media (max-width: 900px) {
+  .verwaltung-tab:has(.rechts) {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 h3 {
@@ -399,20 +422,21 @@ h3 {
 }
 
 .liste {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
   list-style: none;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
 }
 
 .liste li {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.55rem 0.85rem;
-  background: var(--bg-soft);
-  border: 1px solid var(--line);
-  border-radius: 8px;
+  gap: 0.4rem;
+  padding: 0.4rem 0.7rem;
+}
+
+.liste li + li {
+  border-top: 1px solid var(--line);
 }
 
 .zeile {
@@ -491,7 +515,7 @@ h3 {
 }
 
 .erklaerung {
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem;
   line-height: 1.5;
 }