diff --git a/backend/horror.db.bak b/backend/horror.db.bak
index cfad682..508bfc7 100644
Binary files a/backend/horror.db.bak and b/backend/horror.db.bak differ
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;
 }