Prompt Battle \u2013 Gruppenaufgabe<\/title>\n <style>\n :root {\n --color-bg-base: #0f172a;\n --color-bg-elevated: #020617;\n --color-bg-surface: #1e293b;\n --color-bg-card: #334155;\n --color-text-primary: #f1f5f9;\n --color-text-secondary: #cbd5e1;\n --color-text-muted: #94a3b8;\n --color-accent: #38bdf8;\n --color-accent-hover: #0ea5e9;\n --color-success: #10b981;\n --color-warning: #f59e0b;\n --color-error: #ef4444;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);\n color: var(--color-text-primary);\n line-height: 1.6;\n min-height: 100vh;\n }\n .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }\n header {\n text-align: center; padding: 2.5rem 2rem;\n background: var(--color-bg-surface); border-radius: 12px;\n margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n border-bottom: 3px solid var(--color-accent);\n }\n header h1 { font-size: 2.4rem; color: var(--color-accent); margin-bottom: 0.4rem; }\n header .subtitle { font-size: 1.1rem; color: var(--color-text-secondary); }\n header .meta { margin-top: 0.75rem; color: var(--color-text-muted); font-size: 0.9rem; }\n section {\n background: var(--color-bg-surface); padding: 2rem; border-radius: 12px;\n margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n }\n h2 {\n font-size: 1.7rem; color: var(--color-accent); margin-bottom: 1.25rem;\n border-bottom: 2px solid var(--color-accent); padding-bottom: 0.5rem;\n }\n h3 { font-size: 1.2rem; color: var(--color-text-primary); margin: 1.25rem 0 0.75rem; }\n p { color: var(--color-text-secondary); margin-bottom: 0.75rem; }\n\n \/* \u2500\u2500 SCORING TABLE \u2500\u2500 *\/\n .scoring-wrapper { overflow-x: auto; margin-top: 1.25rem; }\n\n .scoring-table {\n width: 100%; border-collapse: separate; border-spacing: 0;\n font-size: 0.95rem;\n }\n .scoring-table thead tr th {\n background: var(--color-bg-card);\n padding: 0.85rem 1rem;\n text-align: center;\n color: var(--color-accent);\n border-bottom: 2px solid var(--color-accent);\n white-space: nowrap;\n }\n .scoring-table thead tr th:first-child { text-align: left; border-radius: 8px 0 0 0; }\n .scoring-table thead tr th:last-child { border-radius: 0 8px 0 0; }\n\n .scoring-table tbody tr { transition: background 0.2s; }\n .scoring-table tbody tr:hover td { background: rgba(56,189,248,0.04); }\n\n .scoring-table tbody tr td {\n padding: 0.75rem 0.75rem;\n border-bottom: 1px solid rgba(255,255,255,0.07);\n text-align: center;\n vertical-align: middle;\n }\n .scoring-table tbody tr td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }\n\n \/* Star rating input *\/\n .star-rating {\n display: inline-flex; flex-direction: row-reverse;\n gap: 2px; justify-content: center;\n }\n .star-rating input { display: none; }\n .star-rating label {\n font-size: 1.4rem; cursor: pointer;\n color: var(--color-bg-card);\n transition: color 0.15s, transform 0.15s;\n filter: drop-shadow(0 0 0px transparent);\n }\n .star-rating label:hover,\n .star-rating label:hover ~ label,\n .star-rating input:checked ~ label {\n color: var(--color-warning);\n filter: drop-shadow(0 0 3px rgba(245,158,11,0.5));\n }\n .star-rating label:hover { transform: scale(1.2); }\n\n \/* Total cell *\/\n .total-cell {\n font-size: 1.5rem; font-weight: 800;\n color: var(--color-text-primary);\n min-width: 70px;\n transition: color 0.3s;\n }\n .total-cell .out-of { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); display: block; }\n\n \/* Rank badge *\/\n .rank-cell { font-size: 1.6rem; min-width: 50px; }\n\n \/* Progress bar in total *\/\n .progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n .progress-bar-outer {\n width: 70px; height: 6px; border-radius: 3px;\n background: var(--color-bg-card); overflow: hidden;\n }\n .progress-bar-inner {\n height: 100%; border-radius: 3px;\n background: linear-gradient(90deg, var(--color-success), var(--color-accent));\n transition: width 0.4s ease;\n width: 0%;\n }\n\n \/* Gruppe color accents *\/\n .gruppe-a { color: #38bdf8; }\n .gruppe-b { color: #a78bfa; }\n .gruppe-c { color: #f472b6; }\n .gruppe-d { color: #10b981; }\n .gruppe-e { color: #f59e0b; }\n\n \/* Winner highlight *\/\n .is-winner td { background: rgba(16,185,129,0.08) !important; }\n .is-winner td:first-child { border-left: 3px solid var(--color-success); }\n\n \/* Live podium *\/\n .podium {\n display: flex; gap: 1rem; justify-content: center;\n align-items: flex-end; margin: 1.5rem 0;\n flex-wrap: wrap;\n }\n .podium-item {\n display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\n transition: all 0.4s ease;\n }\n .podium-bar {\n width: 80px; border-radius: 6px 6px 0 0;\n background: var(--color-bg-card);\n min-height: 10px;\n transition: height 0.5s cubic-bezier(.34,1.56,.64,1), background 0.3s;\n display: flex; align-items: flex-start; justify-content: center;\n padding-top: 6px;\n }\n .podium-score { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); }\n .podium-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-secondary); }\n .podium-rank { font-size: 1.5rem; }\n\n \/* Reset button *\/\n .btn-reset {\n background: transparent; border: 1px solid var(--color-error);\n color: var(--color-error); padding: 0.5rem 1.25rem; border-radius: 6px;\n cursor: pointer; font-size: 0.88rem; transition: all 0.2s;\n }\n .btn-reset:hover { background: var(--color-error); color: white; }\n\n .print-btn { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }\n .btn {\n background: var(--color-accent); color: #000; padding: 0.85rem 2rem;\n border-radius: 8px; border: none; font-size: 1rem; font-weight: 700;\n cursor: pointer; transition: background 0.3s;\n }\n .btn:hover { background: #0ea5e9; }\n\n .highlight-box {\n background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(56,189,248,0.04));\n border-left: 4px solid var(--color-accent); padding: 1.25rem;\n border-radius: 8px; margin: 1rem 0;\n }\n\n \/* Timeline *\/\n .timeline { display: flex; flex-direction: column; gap: 0; margin: 1rem 0; }\n .timeline-item { display: flex; gap: 1.25rem; align-items: stretch; }\n .timeline-left { display: flex; flex-direction: column; align-items: center; width: 60px; flex-shrink: 0; }\n .timeline-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--color-bg-card); border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }\n .timeline-line { width: 2px; background: var(--color-bg-card); flex: 1; margin: 4px 0; }\n .timeline-item:last-child .timeline-line { display: none; }\n .timeline-body { background: var(--color-bg-card); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; flex: 1; border-left: 3px solid var(--color-accent); }\n .timeline-body h4 { color: var(--color-accent); margin-bottom: 0.25rem; font-size: 1rem; }\n .time-badge { display: inline-block; background: rgba(56,189,248,0.15); color: var(--color-accent); font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 20px; margin-bottom: 0.5rem; }\n .timeline-body p { margin: 0; font-size: 0.92rem; }\n\n \/* Technik Cards *\/\n .technik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }\n .technik-card { border-radius: 10px; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }\n .technik-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }\n .tc-a::before { background: #38bdf8; } .tc-a { background: rgba(56,189,248,0.07); }\n .tc-b::before { background: #8b5cf6; } .tc-b { background: rgba(139,92,246,0.07); }\n .tc-c::before { background: #ec4899; } .tc-c { background: rgba(236,72,153,0.07); }\n .tc-d::before { background: #10b981; } .tc-d { background: rgba(16,185,129,0.07); }\n .tc-e::before { background: #f59e0b; } .tc-e { background: rgba(245,158,11,0.07); }\n .gruppe-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 0.75rem; }\n .tc-a .gruppe-badge { background: rgba(56,189,248,0.2); color: #38bdf8; }\n .tc-b .gruppe-badge { background: rgba(139,92,246,0.2); color: #a78bfa; }\n .tc-c .gruppe-badge { background: rgba(236,72,153,0.2); color: #f472b6; }\n .tc-d .gruppe-badge { background: rgba(16,185,129,0.2); color: #10b981; }\n .tc-e .gruppe-badge { background: rgba(245,158,11,0.2); color: #f59e0b; }\n .technik-card h4 { font-size: 1.15rem; color: var(--color-text-primary); margin-bottom: 0.5rem; }\n .technik-card .technik-desc { font-size: 0.88rem; color: var(--color-text-secondary); margin-bottom: 1rem; }\n .tipp-box { background: var(--color-bg-elevated); border-radius: 6px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; border-left: 3px solid var(--color-warning); }\n .tipp-box .tipp-label { font-size: 0.75rem; font-weight: 700; color: var(--color-warning); text-transform: uppercase; margin-bottom: 0.3rem; }\n .tipp-box p { font-size: 0.84rem; margin: 0; }\n .prompt-starter { background: var(--color-bg-elevated); border-radius: 6px; padding: 0.85rem 1rem; border-left: 3px solid var(--color-success); font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.6; }\n .starter-label { font-size: 0.75rem; font-weight: 700; color: var(--color-success); text-transform: uppercase; margin-bottom: 0.3rem; font-family: sans-serif; }\n .notiz-feld { background: var(--color-bg-elevated); border: 1px dashed rgba(56,189,248,0.3); border-radius: 8px; padding: 1.25rem; margin: 0.75rem 0; min-height: 90px; }\n .notiz-label { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; }\n\n \/* Reflexion *\/\n .reflexion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }\n .reflexion-card { background: var(--color-bg-card); border-radius: 8px; padding: 1.25rem; border-left: 4px solid var(--color-accent); }\n .reflexion-card h4 { color: var(--color-accent); margin-bottom: 0.5rem; font-size: 0.95rem; }\n .reflexion-card p { font-size: 0.88rem; margin: 0; color: var(--color-text-muted); font-style: italic; }\n\n .task-box { background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(56,189,248,0.04)); border: 2px solid var(--color-accent); border-radius: 12px; padding: 1.75rem; margin: 1.5rem 0; text-align: center; }\n .task-box .task-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; }\n .task-box .task-text { font-size: 1.25rem; color: var(--color-text-primary); font-weight: 600; line-height: 1.5; margin-bottom: 0.75rem; }\n .task-box .task-sub { font-size: 0.9rem; color: var(--color-text-muted); }\n\n ul, ol { margin-left: 1.75rem; margin-bottom: 0.75rem; color: var(--color-text-secondary); }\n li { margin-bottom: 0.4rem; font-size: 0.95rem; }\n\n footer { text-align: center; padding: 2rem; color: var(--color-text-muted); }\n\n @media print {\n body { background: white; color: #1e293b; }\n section { background: #f8fafc; box-shadow: none; border: 1px solid #e2e8f0; }\n header { background: #1e293b; }\n h2, header h1 { color: #0284c7; }\n .star-rating label { color: #cbd5e1; }\n .star-rating input:checked ~ label { color: #d97706; }\n .print-btn, .btn-reset { display: none; }\n }\n @media (max-width: 768px) {\n .technik-grid { grid-template-columns: 1fr; }\n header h1 { font-size: 1.8rem; }\n .podium-bar { width: 55px; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <header>\n <h1>\ud83c\udfc6 Prompt Battle<\/h1>\n <p class=\"subtitle\">Gruppenaufgabe \u2013 Prompt Engineering Workshop<\/p>\n <p class=\"meta\">\u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb<\/p>\n <\/header>\n\n <div class=\"print-btn\">\n <button class=\"btn\" onclick=\"window.print()\">\ud83d\udda8\ufe0f Arbeitsblatt drucken<\/button>\n <\/div>\n\n <section>\n <h2>\ud83d\udccb Spielregeln<\/h2>\n <p>Jede Gruppe erh\u00e4lt <strong style=\"color:var(--color-accent)\">dieselbe Aufgabe<\/strong>, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet gemeinsam live in der Tabelle unten.<\/p>\n <div class=\"highlight-box\">\n <strong style=\"color:var(--color-accent)\">Ziel:<\/strong> Erlebt selbst, wie dieselbe KI mit verschiedenen Prompts v\u00f6llig unterschiedliche Ergebnisse produziert \u2013 und versteht <em>warum<\/em>.\n <\/div>\n <\/section>\n\n <section>\n <h2>\u23f1 Ablauf<\/h2>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83d\udce2<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">0 \u2013 3 Min<\/span><h4>Einstieg & Gruppen bilden<\/h4><p>Aufgabe lesen, Gruppen bilden (3\u20134 Personen), Technik-Karte ausw\u00e4hlen oder auslosen.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\u2699\ufe0f<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">3 \u2013 15 Min<\/span><h4>Prompt entwickeln & testen<\/h4><p>Lest eure Technik-Karte, formuliert einen Prompt, testet und verfeinert ihn. Notiert euren besten Prompt und die KI-Antwort.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83c\udfa4<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">15 \u2013 25 Min<\/span><h4>Pr\u00e4sentation (je ~2 Min)<\/h4><p>Jede Gruppe zeigt: Technik \u00b7 fertiger Prompt \u00b7 KI-Antwort \u00b7 \u00dcberraschungen.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83d\udca1<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">25 \u2013 30 Min<\/span><h4>Bewertung & Reflexion<\/h4><p>Punkte eintragen, Sieger k\u00fcren, gemeinsam diskutieren.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83c\udfaf Die Aufgabe (f\u00fcr alle Gruppen gleich)<\/h2>\n <div class=\"task-box\">\n <div class=\"task-label\">Eure Aufgabe an die KI<\/div>\n <div class=\"task-text\">\u201eErstellt einen kurzen Onboarding-Leitfaden f\u00fcr neue Mitarbeiter im Homeoffice.“<\/div>\n <div class=\"task-sub\">Der Leitfaden soll abdecken: Erste Schritte \u00b7 Kommunikation \u00b7 Tools \u00b7 Produktivit\u00e4ts-Tipps<\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83c\udfb2 Technik-Karten<\/h2>\n <div class=\"technik-grid\">\n <div class=\"technik-card tc-a\">\n <div class=\"gruppe-badge\">\ud83c\udfaf Gruppe A<\/div>\n <h4>Zero-Shot Prompting<\/h4>\n <p class=\"technik-desc\">Direkte Anweisung ohne Beispiele. Die KI nutzt nur ihr Vorwissen.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>So pr\u00e4zise wie m\u00f6glich in einem Satz \u2013 ohne Beispiele oder Rolle.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Erstelle einen Onboarding-Leitfaden f\u00fcr neue Mitarbeiter im Homeoffice.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-b\">\n <div class=\"gruppe-badge\">\ud83d\udcda Gruppe B<\/div>\n <h4>Few-Shot Prompting<\/h4>\n <p class=\"technik-desc\">Die KI lernt aus 2 Beispielen euren gew\u00fcnschten Stil und Aufbau.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Erfindet 2 kurze Beispiel-Eintr\u00e4ge, damit die KI das Format versteht.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Beispiel 1: Thema: Datenschutz \u2192 Leitfaden: 1. Passw\u00f6rter nicht teilen 2. Bildschirm sperren\nBeispiel 2: Thema: Sicherheit \u2192 Leitfaden: 1. Notausg\u00e4nge kennen 2. Schutzausr\u00fcstung tragen\nThema: Onboarding Homeoffice \u2192<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-c\">\n <div class=\"gruppe-badge\">\ud83c\udfad Gruppe C<\/div>\n <h4>Role Prompting<\/h4>\n <p class=\"technik-desc\">Die KI schl\u00fcpft in eine Expertenrolle \u2013 Ton und Fachvokabular \u00e4ndern sich.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Je pr\u00e4ziser die Rolle (Erfahrung, Unternehmen), desto besser das Ergebnis.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Du bist eine erfahrene HR-Managerin mit 10 Jahren Remote-Erfahrung. Erstelle einen herzlichen Onboarding-Leitfaden f\u00fcr Homeoffice-Einsteiger.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-d\">\n <div class=\"gruppe-badge\">\ud83d\udd17 Gruppe D<\/div>\n <h4>Chain-of-Thought<\/h4>\n <p class=\"technik-desc\">Die KI denkt laut Schritt f\u00fcr Schritt \u2013 strukturierter und vollst\u00e4ndiger.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Gebt explizite Denkschritte vor, z.B. „\u00dcberlege zuerst…, dann…“.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Schritt 1: Welche Herausforderungen haben neue Homeoffice-Mitarbeiter?\nSchritt 2: Was sind die 5 wichtigsten Bereiche?\nSchritt 3: 2\u20133 Tipps pro Bereich.\nSchritt 4: Fasse alles als Leitfaden zusammen.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-e\">\n <div class=\"gruppe-badge\">\u2b50 Gruppe E<\/div>\n <h4>Best-Practice Prompt<\/h4>\n <p class=\"technik-desc\">Der Meisterprompt: Rolle + Struktur + Zielgruppe + Stil + L\u00e4nge kombiniert.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Alle 5 Elemente rein: Wer? Struktur? F\u00fcr wen? Welcher Ton? Wie lang?<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Du bist HR-Managerin. Zielgruppe: Neue Mitarbeiter, 25\u201335 J.\nStruktur: Technik \u00b7 Kommunikation \u00b7 Routine \u00b7 Wohlbefinden.\nStil: Freundlich, mit konkreten Beispielen. Max. 300 W\u00f6rter.\nErstelle den Onboarding-Leitfaden.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <h2>\ud83c\udfc5 Live-Bewertung<\/h2>\n <p>Klickt auf die Sterne um Punkte zu vergeben (1\u20135 pro Kriterium). Gesamt und Rang werden sofort berechnet.<\/p>\n\n <div class=\"scoring-wrapper\">\n <table class=\"scoring-table\" id=\"scoringTable\">\n <thead>\n <tr>\n <th style=\"min-width:160px\">Gruppe<\/th>\n <th>\ud83d\udccb<br><span style=\"font-size:0.75rem;font-weight:400\">Vollst\u00e4ndigkeit<\/span><\/th>\n <th>\ud83c\udfaf<br><span style=\"font-size:0.75rem;font-weight:400\">N\u00fctzlichkeit<\/span><\/th>\n <th>\u270d\ufe0f<br><span style=\"font-size:0.75rem;font-weight:400\">Stil & Ton<\/span><\/th>\n <th>\ud83e\udde0<br><span style=\"font-size:0.75rem;font-weight:400\">Prompt-Qualit\u00e4t<\/span><\/th>\n <th>\u2211<br><span style=\"font-size:0.75rem;font-weight:400\">Gesamt \/ 20<\/span><\/th>\n <th>\ud83e\udd47<br><span style=\"font-size:0.75rem;font-weight:400\">Rang<\/span><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"scoringBody\"><\/tbody>\n <\/table>\n <\/div>\n\n \n <h3 style=\"text-align:center; margin-top:2rem;\">\ud83d\udcca Live-Podium<\/h3>\n <div class=\"podium\" id=\"podium\"><\/div>\n\n <div style=\"display:flex; justify-content:center; margin-top:1.5rem;\">\n <button class=\"btn-reset\" onclick=\"resetAll()\">\ud83d\udd04 Alle Punkte zur\u00fccksetzen<\/button>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83d\udcac Reflexionsfragen<\/h2>\n <div class=\"reflexion-grid\">\n <div class=\"reflexion-card\"><h4>\ud83c\udfc6 Welche Technik gewann \u2013 warum?<\/h4><p>War es die aufwendigste? Die einfachste? Was sagt das \u00fcber Prompt Engineering aus?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83d\udd04 Was h\u00e4ttet ihr anders gemacht?<\/h4><p>Wenn ihr den Prompt nochmal schreibt \u2013 was \u00e4ndert ihr?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83c\udf0d Wo w\u00fcrdet ihr welche Technik einsetzen?<\/h4><p>In welchem echten Arbeitskontext w\u00e4re eure Technik am n\u00fctzlichsten?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\u26a0\ufe0f Was hat die KI falsch gemacht?<\/h4><p>Halluzinationen? Falscher Ton? Wie h\u00e4ttet ihr das verhindern k\u00f6nnen?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83d\udcc8 Wie viele Versuche brauchtet ihr?<\/h4><p>Was hat das Verfeinern des Prompts bewirkt?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83e\udd1d Aufwand vs. Ergebnis?<\/h4><p>Hat der aufwendigste Prompt das beste Ergebnis geliefert?<\/p><\/div>\n <\/div>\n <\/section>\n\n <footer>\n <p>\ud83c\udfc6 Prompt Battle \u2013 Gruppenarbeitsblatt<\/p>\n <p style=\"font-size:0.85rem; margin-top:0.4rem;\">Prompt Engineering Workshop \u00b7 5 Gruppen \u00b7 30 Minuten<\/p>\n <\/footer>\n<\/div>\n\n<script>\nconst GROUPS = [\n { id: 'a', label: '\ud83c\udfaf A \u2013 Zero-Shot', colorClass: 'gruppe-a', barColor: '#38bdf8' },\n { id: 'b', label: '\ud83d\udcda B \u2013 Few-Shot', colorClass: 'gruppe-b', barColor: '#a78bfa' },\n { id: 'c', label: '\ud83c\udfad C \u2013 Role', colorClass: 'gruppe-c', barColor: '#f472b6' },\n { id: 'd', label: '\ud83d\udd17 D \u2013 CoT', colorClass: 'gruppe-d', barColor: '#10b981' },\n { id: 'e', label: '\u2b50 E \u2013 Best-Practice',colorClass: 'gruppe-e', barColor: '#f59e0b' },\n];\nconst CRITERIA = ['vollstaendigkeit', 'nuetzlichkeit', 'stil', 'prompt'];\nconst RANK_EMOJIS = ['\ud83e\udd47', '\ud83e\udd48', '\ud83e\udd49', '4\ufe0f\u20e3', '5\ufe0f\u20e3'];\n\n\/\/ Build table rows\nconst tbody = document.getElementById('scoringBody');\nGROUPS.forEach(g => {\n const tr = document.createElement('tr');\n tr.id = 'row-' + g.id;\n\n \/\/ Name cell\n const nameTd = document.createElement('td');\n nameTd.innerHTML = `<span class=\"${g.colorClass}\">${g.label}<\/span>`;\n tr.appendChild(nameTd);\n\n \/\/ Star cells\n CRITERIA.forEach(c => {\n const td = document.createElement('td');\n td.innerHTML = buildStars(g.id, c);\n tr.appendChild(td);\n });\n\n \/\/ Total cell\n const totalTd = document.createElement('td');\n totalTd.id = 'total-' + g.id;\n totalTd.className = 'total-cell';\n totalTd.innerHTML = `\n <div class=\"progress-wrap\">\n <span id=\"num-${g.id}\">0<\/span>\n <span class=\"out-of\">\/ 20<\/span>\n <div class=\"progress-bar-outer\">\n <div class=\"progress-bar-inner\" id=\"bar-${g.id}\"><\/div>\n <\/div>\n <\/div>`;\n tr.appendChild(totalTd);\n\n \/\/ Rank cell\n const rankTd = document.createElement('td');\n rankTd.className = 'rank-cell';\n rankTd.id = 'rank-' + g.id;\n rankTd.textContent = '\u2013';\n tr.appendChild(rankTd);\n\n tbody.appendChild(tr);\n});\n\nfunction buildStars(groupId, criterion) {\n let html = `<div class=\"star-rating\">`;\n for (let i = 5; i >= 1; i--) {\n const id = `star-${groupId}-${criterion}-${i}`;\n html += `<input type=\"radio\" id=\"${id}\" name=\"score-${groupId}-${criterion}\" value=\"${i}\" onchange=\"updateScores()\">`;\n html += `<label for=\"${id}\" title=\"${i} Punkt${i>1?'e':''}\" aria-label=\"${i} Sterne\">\u2605<\/label>`;\n }\n html += `<\/div>`;\n return html;\n}\n\nfunction getScore(groupId, criterion) {\n const checked = document.querySelector(`input[name=\"score-${groupId}-${criterion}\"]:checked`);\n return checked ? parseInt(checked.value) : 0;\n}\n\nfunction getTotal(groupId) {\n return CRITERIA.reduce((sum, c) => sum + getScore(groupId, c), 0);\n}\n\nfunction updateScores() {\n const totals = GROUPS.map(g => ({ id: g.id, total: getTotal(g.id) }));\n\n \/\/ Update totals + bars\n totals.forEach(t => {\n document.getElementById('num-' + t.id).textContent = t.total;\n document.getElementById('bar-' + t.id).style.width = (t.total \/ 20 * 100) + '%';\n });\n\n \/\/ Compute ranks\n const sorted = [...totals].sort((a, b) => b.total - a.total);\n let currentRank = 1;\n sorted.forEach((item, idx) => {\n if (idx > 0 && item.total < sorted[idx - 1].total) currentRank = idx + 1;\n document.getElementById('rank-' + item.id).textContent = item.total === 0 ? '\u2013' : RANK_EMOJIS[currentRank - 1];\n });\n\n \/\/ Highlight winner row\n const maxScore = Math.max(...totals.map(t => t.total));\n GROUPS.forEach(g => {\n const row = document.getElementById('row-' + g.id);\n row.classList.toggle('is-winner', maxScore > 0 && getTotal(g.id) === maxScore);\n });\n\n \/\/ Update podium\n updatePodium(totals);\n}\n\nfunction updatePodium(totals) {\n const podium = document.getElementById('podium');\n const maxH = 160;\n const maxScore = Math.max(...totals.map(t => t.total), 1);\n\n podium.innerHTML = '';\n totals.forEach((t, i) => {\n const g = GROUPS.find(g => g.id === t.id);\n const height = t.total > 0 ? Math.max(20, (t.total \/ 20) * maxH) : 10;\n const div = document.createElement('div');\n div.className = 'podium-item';\n div.innerHTML = `\n <span class=\"podium-score\" style=\"color:${g.barColor}\">${t.total}<\/span>\n <div class=\"podium-bar\" style=\"height:${height}px; background:${g.barColor}22; border: 2px solid ${g.barColor}; border-bottom: none;\">\n <\/div>\n <span class=\"podium-label\" style=\"color:${g.barColor}\">${g.label.split(' ').slice(0,2).join(' ')}<\/span>\n `;\n podium.appendChild(div);\n });\n}\n\nfunction resetAll() {\n if (!confirm('Alle Punkte zur\u00fccksetzen?')) return;\n document.querySelectorAll('input[type=\"radio\"]').forEach(r => r.checked = false);\n GROUPS.forEach(g => {\n document.getElementById('num-' + g.id).textContent = '0';\n document.getElementById('bar-' + g.id).style.width = '0%';\n document.getElementById('rank-' + g.id).textContent = '\u2013';\n document.getElementById('row-' + g.id).classList.remove('is-winner');\n });\n updatePodium(GROUPS.map(g => ({ id: g.id, total: 0 })));\n}\n\n\/\/ Init podium\nupdatePodium(GROUPS.map(g => ({ id: g.id, total: 0 })));\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Prompt Battle - KI Marketing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/metalmotion.de\/kim\/89-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prompt Battle - KI Marketing\" \/>\n<meta property=\"og:description\" content=\"Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/metalmotion.de\/kim\/89-2\/\" \/>\n<meta property=\"og:site_name\" content=\"KI Marketing\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-08T10:59:10+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\",\"name\":\"Prompt Battle - KI Marketing\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/#website\"},\"datePublished\":\"2026-03-08T10:48:06+00:00\",\"dateModified\":\"2026-03-08T10:59:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prompt Battle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/#website\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/\",\"name\":\"KI Marketing\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n","yoast_head_json":{"title":"Prompt Battle - KI Marketing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/metalmotion.de\/kim\/89-2\/","og_locale":"de_DE","og_type":"article","og_title":"Prompt Battle - KI Marketing","og_description":"Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]","og_url":"https:\/\/metalmotion.de\/kim\/89-2\/","og_site_name":"KI Marketing","article_modified_time":"2026-03-08T10:59:10+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/metalmotion.de\/kim\/89-2\/","url":"https:\/\/metalmotion.de\/kim\/89-2\/","name":"Prompt Battle - KI Marketing","isPartOf":{"@id":"https:\/\/metalmotion.de\/kim\/#website"},"datePublished":"2026-03-08T10:48:06+00:00","dateModified":"2026-03-08T10:59:10+00:00","breadcrumb":{"@id":"https:\/\/metalmotion.de\/kim\/89-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/metalmotion.de\/kim\/89-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/metalmotion.de\/kim\/89-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/metalmotion.de\/kim\/"},{"@type":"ListItem","position":2,"name":"Prompt Battle"}]},{"@type":"WebSite","@id":"https:\/\/metalmotion.de\/kim\/#website","url":"https:\/\/metalmotion.de\/kim\/","name":"KI Marketing","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/metalmotion.de\/kim\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":2,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":89,"date":"2026-03-08T11:48:06","date_gmt":"2026-03-08T10:48:06","guid":{"rendered":"https:\/\/metalmotion.de\/kim\/?page_id=89"},"modified":"2026-03-08T11:59:10","modified_gmt":"2026-03-08T10:59:10","slug":"89-2","status":"publish","type":"page","link":"https:\/\/metalmotion.de\/kim\/89-2\/","title":{"rendered":"Prompt Battle"},"content":{"rendered":"\n\n\n\n\n \n \n Prompt Battle \u2013 Gruppenaufgabe<\/title>\n <style>\n :root {\n --color-bg-base: #0f172a;\n --color-bg-elevated: #020617;\n --color-bg-surface: #1e293b;\n --color-bg-card: #334155;\n --color-text-primary: #f1f5f9;\n --color-text-secondary: #cbd5e1;\n --color-text-muted: #94a3b8;\n --color-accent: #38bdf8;\n --color-accent-hover: #0ea5e9;\n --color-success: #10b981;\n --color-warning: #f59e0b;\n --color-error: #ef4444;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);\n color: var(--color-text-primary);\n line-height: 1.6;\n min-height: 100vh;\n }\n .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }\n header {\n text-align: center; padding: 2.5rem 2rem;\n background: var(--color-bg-surface); border-radius: 12px;\n margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n border-bottom: 3px solid var(--color-accent);\n }\n header h1 { font-size: 2.4rem; color: var(--color-accent); margin-bottom: 0.4rem; }\n header .subtitle { font-size: 1.1rem; color: var(--color-text-secondary); }\n header .meta { margin-top: 0.75rem; color: var(--color-text-muted); font-size: 0.9rem; }\n section {\n background: var(--color-bg-surface); padding: 2rem; border-radius: 12px;\n margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n }\n h2 {\n font-size: 1.7rem; color: var(--color-accent); margin-bottom: 1.25rem;\n border-bottom: 2px solid var(--color-accent); padding-bottom: 0.5rem;\n }\n h3 { font-size: 1.2rem; color: var(--color-text-primary); margin: 1.25rem 0 0.75rem; }\n p { color: var(--color-text-secondary); margin-bottom: 0.75rem; }\n\n \/* \u2500\u2500 SCORING TABLE \u2500\u2500 *\/\n .scoring-wrapper { overflow-x: auto; margin-top: 1.25rem; }\n\n .scoring-table {\n width: 100%; border-collapse: separate; border-spacing: 0;\n font-size: 0.95rem;\n }\n .scoring-table thead tr th {\n background: var(--color-bg-card);\n padding: 0.85rem 1rem;\n text-align: center;\n color: var(--color-accent);\n border-bottom: 2px solid var(--color-accent);\n white-space: nowrap;\n }\n .scoring-table thead tr th:first-child { text-align: left; border-radius: 8px 0 0 0; }\n .scoring-table thead tr th:last-child { border-radius: 0 8px 0 0; }\n\n .scoring-table tbody tr { transition: background 0.2s; }\n .scoring-table tbody tr:hover td { background: rgba(56,189,248,0.04); }\n\n .scoring-table tbody tr td {\n padding: 0.75rem 0.75rem;\n border-bottom: 1px solid rgba(255,255,255,0.07);\n text-align: center;\n vertical-align: middle;\n }\n .scoring-table tbody tr td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }\n\n \/* Star rating input *\/\n .star-rating {\n display: inline-flex; flex-direction: row-reverse;\n gap: 2px; justify-content: center;\n }\n .star-rating input { display: none; }\n .star-rating label {\n font-size: 1.4rem; cursor: pointer;\n color: var(--color-bg-card);\n transition: color 0.15s, transform 0.15s;\n filter: drop-shadow(0 0 0px transparent);\n }\n .star-rating label:hover,\n .star-rating label:hover ~ label,\n .star-rating input:checked ~ label {\n color: var(--color-warning);\n filter: drop-shadow(0 0 3px rgba(245,158,11,0.5));\n }\n .star-rating label:hover { transform: scale(1.2); }\n\n \/* Total cell *\/\n .total-cell {\n font-size: 1.5rem; font-weight: 800;\n color: var(--color-text-primary);\n min-width: 70px;\n transition: color 0.3s;\n }\n .total-cell .out-of { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); display: block; }\n\n \/* Rank badge *\/\n .rank-cell { font-size: 1.6rem; min-width: 50px; }\n\n \/* Progress bar in total *\/\n .progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n .progress-bar-outer {\n width: 70px; height: 6px; border-radius: 3px;\n background: var(--color-bg-card); overflow: hidden;\n }\n .progress-bar-inner {\n height: 100%; border-radius: 3px;\n background: linear-gradient(90deg, var(--color-success), var(--color-accent));\n transition: width 0.4s ease;\n width: 0%;\n }\n\n \/* Gruppe color accents *\/\n .gruppe-a { color: #38bdf8; }\n .gruppe-b { color: #a78bfa; }\n .gruppe-c { color: #f472b6; }\n .gruppe-d { color: #10b981; }\n .gruppe-e { color: #f59e0b; }\n\n \/* Winner highlight *\/\n .is-winner td { background: rgba(16,185,129,0.08) !important; }\n .is-winner td:first-child { border-left: 3px solid var(--color-success); }\n\n \/* Live podium *\/\n .podium {\n display: flex; gap: 1rem; justify-content: center;\n align-items: flex-end; margin: 1.5rem 0;\n flex-wrap: wrap;\n }\n .podium-item {\n display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\n transition: all 0.4s ease;\n }\n .podium-bar {\n width: 80px; border-radius: 6px 6px 0 0;\n background: var(--color-bg-card);\n min-height: 10px;\n transition: height 0.5s cubic-bezier(.34,1.56,.64,1), background 0.3s;\n display: flex; align-items: flex-start; justify-content: center;\n padding-top: 6px;\n }\n .podium-score { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); }\n .podium-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-secondary); }\n .podium-rank { font-size: 1.5rem; }\n\n \/* Reset button *\/\n .btn-reset {\n background: transparent; border: 1px solid var(--color-error);\n color: var(--color-error); padding: 0.5rem 1.25rem; border-radius: 6px;\n cursor: pointer; font-size: 0.88rem; transition: all 0.2s;\n }\n .btn-reset:hover { background: var(--color-error); color: white; }\n\n .print-btn { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }\n .btn {\n background: var(--color-accent); color: #000; padding: 0.85rem 2rem;\n border-radius: 8px; border: none; font-size: 1rem; font-weight: 700;\n cursor: pointer; transition: background 0.3s;\n }\n .btn:hover { background: #0ea5e9; }\n\n .highlight-box {\n background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(56,189,248,0.04));\n border-left: 4px solid var(--color-accent); padding: 1.25rem;\n border-radius: 8px; margin: 1rem 0;\n }\n\n \/* Timeline *\/\n .timeline { display: flex; flex-direction: column; gap: 0; margin: 1rem 0; }\n .timeline-item { display: flex; gap: 1.25rem; align-items: stretch; }\n .timeline-left { display: flex; flex-direction: column; align-items: center; width: 60px; flex-shrink: 0; }\n .timeline-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--color-bg-card); border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }\n .timeline-line { width: 2px; background: var(--color-bg-card); flex: 1; margin: 4px 0; }\n .timeline-item:last-child .timeline-line { display: none; }\n .timeline-body { background: var(--color-bg-card); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; flex: 1; border-left: 3px solid var(--color-accent); }\n .timeline-body h4 { color: var(--color-accent); margin-bottom: 0.25rem; font-size: 1rem; }\n .time-badge { display: inline-block; background: rgba(56,189,248,0.15); color: var(--color-accent); font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 20px; margin-bottom: 0.5rem; }\n .timeline-body p { margin: 0; font-size: 0.92rem; }\n\n \/* Technik Cards *\/\n .technik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }\n .technik-card { border-radius: 10px; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }\n .technik-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }\n .tc-a::before { background: #38bdf8; } .tc-a { background: rgba(56,189,248,0.07); }\n .tc-b::before { background: #8b5cf6; } .tc-b { background: rgba(139,92,246,0.07); }\n .tc-c::before { background: #ec4899; } .tc-c { background: rgba(236,72,153,0.07); }\n .tc-d::before { background: #10b981; } .tc-d { background: rgba(16,185,129,0.07); }\n .tc-e::before { background: #f59e0b; } .tc-e { background: rgba(245,158,11,0.07); }\n .gruppe-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 0.75rem; }\n .tc-a .gruppe-badge { background: rgba(56,189,248,0.2); color: #38bdf8; }\n .tc-b .gruppe-badge { background: rgba(139,92,246,0.2); color: #a78bfa; }\n .tc-c .gruppe-badge { background: rgba(236,72,153,0.2); color: #f472b6; }\n .tc-d .gruppe-badge { background: rgba(16,185,129,0.2); color: #10b981; }\n .tc-e .gruppe-badge { background: rgba(245,158,11,0.2); color: #f59e0b; }\n .technik-card h4 { font-size: 1.15rem; color: var(--color-text-primary); margin-bottom: 0.5rem; }\n .technik-card .technik-desc { font-size: 0.88rem; color: var(--color-text-secondary); margin-bottom: 1rem; }\n .tipp-box { background: var(--color-bg-elevated); border-radius: 6px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; border-left: 3px solid var(--color-warning); }\n .tipp-box .tipp-label { font-size: 0.75rem; font-weight: 700; color: var(--color-warning); text-transform: uppercase; margin-bottom: 0.3rem; }\n .tipp-box p { font-size: 0.84rem; margin: 0; }\n .prompt-starter { background: var(--color-bg-elevated); border-radius: 6px; padding: 0.85rem 1rem; border-left: 3px solid var(--color-success); font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.6; }\n .starter-label { font-size: 0.75rem; font-weight: 700; color: var(--color-success); text-transform: uppercase; margin-bottom: 0.3rem; font-family: sans-serif; }\n .notiz-feld { background: var(--color-bg-elevated); border: 1px dashed rgba(56,189,248,0.3); border-radius: 8px; padding: 1.25rem; margin: 0.75rem 0; min-height: 90px; }\n .notiz-label { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; }\n\n \/* Reflexion *\/\n .reflexion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }\n .reflexion-card { background: var(--color-bg-card); border-radius: 8px; padding: 1.25rem; border-left: 4px solid var(--color-accent); }\n .reflexion-card h4 { color: var(--color-accent); margin-bottom: 0.5rem; font-size: 0.95rem; }\n .reflexion-card p { font-size: 0.88rem; margin: 0; color: var(--color-text-muted); font-style: italic; }\n\n .task-box { background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(56,189,248,0.04)); border: 2px solid var(--color-accent); border-radius: 12px; padding: 1.75rem; margin: 1.5rem 0; text-align: center; }\n .task-box .task-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; }\n .task-box .task-text { font-size: 1.25rem; color: var(--color-text-primary); font-weight: 600; line-height: 1.5; margin-bottom: 0.75rem; }\n .task-box .task-sub { font-size: 0.9rem; color: var(--color-text-muted); }\n\n ul, ol { margin-left: 1.75rem; margin-bottom: 0.75rem; color: var(--color-text-secondary); }\n li { margin-bottom: 0.4rem; font-size: 0.95rem; }\n\n footer { text-align: center; padding: 2rem; color: var(--color-text-muted); }\n\n @media print {\n body { background: white; color: #1e293b; }\n section { background: #f8fafc; box-shadow: none; border: 1px solid #e2e8f0; }\n header { background: #1e293b; }\n h2, header h1 { color: #0284c7; }\n .star-rating label { color: #cbd5e1; }\n .star-rating input:checked ~ label { color: #d97706; }\n .print-btn, .btn-reset { display: none; }\n }\n @media (max-width: 768px) {\n .technik-grid { grid-template-columns: 1fr; }\n header h1 { font-size: 1.8rem; }\n .podium-bar { width: 55px; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <header>\n <h1>\ud83c\udfc6 Prompt Battle<\/h1>\n <p class=\"subtitle\">Gruppenaufgabe \u2013 Prompt Engineering Workshop<\/p>\n <p class=\"meta\">\u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb<\/p>\n <\/header>\n\n <div class=\"print-btn\">\n <button class=\"btn\" onclick=\"window.print()\">\ud83d\udda8\ufe0f Arbeitsblatt drucken<\/button>\n <\/div>\n\n <section>\n <h2>\ud83d\udccb Spielregeln<\/h2>\n <p>Jede Gruppe erh\u00e4lt <strong style=\"color:var(--color-accent)\">dieselbe Aufgabe<\/strong>, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet gemeinsam live in der Tabelle unten.<\/p>\n <div class=\"highlight-box\">\n <strong style=\"color:var(--color-accent)\">Ziel:<\/strong> Erlebt selbst, wie dieselbe KI mit verschiedenen Prompts v\u00f6llig unterschiedliche Ergebnisse produziert \u2013 und versteht <em>warum<\/em>.\n <\/div>\n <\/section>\n\n <section>\n <h2>\u23f1 Ablauf<\/h2>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83d\udce2<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">0 \u2013 3 Min<\/span><h4>Einstieg & Gruppen bilden<\/h4><p>Aufgabe lesen, Gruppen bilden (3\u20134 Personen), Technik-Karte ausw\u00e4hlen oder auslosen.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\u2699\ufe0f<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">3 \u2013 15 Min<\/span><h4>Prompt entwickeln & testen<\/h4><p>Lest eure Technik-Karte, formuliert einen Prompt, testet und verfeinert ihn. Notiert euren besten Prompt und die KI-Antwort.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83c\udfa4<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">15 \u2013 25 Min<\/span><h4>Pr\u00e4sentation (je ~2 Min)<\/h4><p>Jede Gruppe zeigt: Technik \u00b7 fertiger Prompt \u00b7 KI-Antwort \u00b7 \u00dcberraschungen.<\/p><\/div>\n <\/div>\n <div class=\"timeline-item\">\n <div class=\"timeline-left\"><div class=\"timeline-dot\">\ud83d\udca1<\/div><div class=\"timeline-line\"><\/div><\/div>\n <div class=\"timeline-body\"><span class=\"time-badge\">25 \u2013 30 Min<\/span><h4>Bewertung & Reflexion<\/h4><p>Punkte eintragen, Sieger k\u00fcren, gemeinsam diskutieren.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83c\udfaf Die Aufgabe (f\u00fcr alle Gruppen gleich)<\/h2>\n <div class=\"task-box\">\n <div class=\"task-label\">Eure Aufgabe an die KI<\/div>\n <div class=\"task-text\">\u201eErstellt einen kurzen Onboarding-Leitfaden f\u00fcr neue Mitarbeiter im Homeoffice.“<\/div>\n <div class=\"task-sub\">Der Leitfaden soll abdecken: Erste Schritte \u00b7 Kommunikation \u00b7 Tools \u00b7 Produktivit\u00e4ts-Tipps<\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83c\udfb2 Technik-Karten<\/h2>\n <div class=\"technik-grid\">\n <div class=\"technik-card tc-a\">\n <div class=\"gruppe-badge\">\ud83c\udfaf Gruppe A<\/div>\n <h4>Zero-Shot Prompting<\/h4>\n <p class=\"technik-desc\">Direkte Anweisung ohne Beispiele. Die KI nutzt nur ihr Vorwissen.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>So pr\u00e4zise wie m\u00f6glich in einem Satz \u2013 ohne Beispiele oder Rolle.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Erstelle einen Onboarding-Leitfaden f\u00fcr neue Mitarbeiter im Homeoffice.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-b\">\n <div class=\"gruppe-badge\">\ud83d\udcda Gruppe B<\/div>\n <h4>Few-Shot Prompting<\/h4>\n <p class=\"technik-desc\">Die KI lernt aus 2 Beispielen euren gew\u00fcnschten Stil und Aufbau.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Erfindet 2 kurze Beispiel-Eintr\u00e4ge, damit die KI das Format versteht.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Beispiel 1: Thema: Datenschutz \u2192 Leitfaden: 1. Passw\u00f6rter nicht teilen 2. Bildschirm sperren\nBeispiel 2: Thema: Sicherheit \u2192 Leitfaden: 1. Notausg\u00e4nge kennen 2. Schutzausr\u00fcstung tragen\nThema: Onboarding Homeoffice \u2192<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-c\">\n <div class=\"gruppe-badge\">\ud83c\udfad Gruppe C<\/div>\n <h4>Role Prompting<\/h4>\n <p class=\"technik-desc\">Die KI schl\u00fcpft in eine Expertenrolle \u2013 Ton und Fachvokabular \u00e4ndern sich.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Je pr\u00e4ziser die Rolle (Erfahrung, Unternehmen), desto besser das Ergebnis.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Du bist eine erfahrene HR-Managerin mit 10 Jahren Remote-Erfahrung. Erstelle einen herzlichen Onboarding-Leitfaden f\u00fcr Homeoffice-Einsteiger.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-d\">\n <div class=\"gruppe-badge\">\ud83d\udd17 Gruppe D<\/div>\n <h4>Chain-of-Thought<\/h4>\n <p class=\"technik-desc\">Die KI denkt laut Schritt f\u00fcr Schritt \u2013 strukturierter und vollst\u00e4ndiger.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Gebt explizite Denkschritte vor, z.B. „\u00dcberlege zuerst…, dann…“.<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Schritt 1: Welche Herausforderungen haben neue Homeoffice-Mitarbeiter?\nSchritt 2: Was sind die 5 wichtigsten Bereiche?\nSchritt 3: 2\u20133 Tipps pro Bereich.\nSchritt 4: Fasse alles als Leitfaden zusammen.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <div class=\"technik-card tc-e\">\n <div class=\"gruppe-badge\">\u2b50 Gruppe E<\/div>\n <h4>Best-Practice Prompt<\/h4>\n <p class=\"technik-desc\">Der Meisterprompt: Rolle + Struktur + Zielgruppe + Stil + L\u00e4nge kombiniert.<\/p>\n <div class=\"tipp-box\"><div class=\"tipp-label\">\ud83d\udca1 Fokus<\/div><p>Alle 5 Elemente rein: Wer? Struktur? F\u00fcr wen? Welcher Ton? Wie lang?<\/p><\/div>\n <div class=\"starter-label\">\ud83d\ude80 Starter-Prompt<\/div>\n <div class=\"prompt-starter\">Du bist HR-Managerin. Zielgruppe: Neue Mitarbeiter, 25\u201335 J.\nStruktur: Technik \u00b7 Kommunikation \u00b7 Routine \u00b7 Wohlbefinden.\nStil: Freundlich, mit konkreten Beispielen. Max. 300 W\u00f6rter.\nErstelle den Onboarding-Leitfaden.<\/div>\n <div class=\"notiz-feld\"><div class=\"notiz-label\">\ud83d\udcdd Euer verbesserter Prompt<\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <h2>\ud83c\udfc5 Live-Bewertung<\/h2>\n <p>Klickt auf die Sterne um Punkte zu vergeben (1\u20135 pro Kriterium). Gesamt und Rang werden sofort berechnet.<\/p>\n\n <div class=\"scoring-wrapper\">\n <table class=\"scoring-table\" id=\"scoringTable\">\n <thead>\n <tr>\n <th style=\"min-width:160px\">Gruppe<\/th>\n <th>\ud83d\udccb<br><span style=\"font-size:0.75rem;font-weight:400\">Vollst\u00e4ndigkeit<\/span><\/th>\n <th>\ud83c\udfaf<br><span style=\"font-size:0.75rem;font-weight:400\">N\u00fctzlichkeit<\/span><\/th>\n <th>\u270d\ufe0f<br><span style=\"font-size:0.75rem;font-weight:400\">Stil & Ton<\/span><\/th>\n <th>\ud83e\udde0<br><span style=\"font-size:0.75rem;font-weight:400\">Prompt-Qualit\u00e4t<\/span><\/th>\n <th>\u2211<br><span style=\"font-size:0.75rem;font-weight:400\">Gesamt \/ 20<\/span><\/th>\n <th>\ud83e\udd47<br><span style=\"font-size:0.75rem;font-weight:400\">Rang<\/span><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"scoringBody\"><\/tbody>\n <\/table>\n <\/div>\n\n \n <h3 style=\"text-align:center; margin-top:2rem;\">\ud83d\udcca Live-Podium<\/h3>\n <div class=\"podium\" id=\"podium\"><\/div>\n\n <div style=\"display:flex; justify-content:center; margin-top:1.5rem;\">\n <button class=\"btn-reset\" onclick=\"resetAll()\">\ud83d\udd04 Alle Punkte zur\u00fccksetzen<\/button>\n <\/div>\n <\/section>\n\n <section>\n <h2>\ud83d\udcac Reflexionsfragen<\/h2>\n <div class=\"reflexion-grid\">\n <div class=\"reflexion-card\"><h4>\ud83c\udfc6 Welche Technik gewann \u2013 warum?<\/h4><p>War es die aufwendigste? Die einfachste? Was sagt das \u00fcber Prompt Engineering aus?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83d\udd04 Was h\u00e4ttet ihr anders gemacht?<\/h4><p>Wenn ihr den Prompt nochmal schreibt \u2013 was \u00e4ndert ihr?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83c\udf0d Wo w\u00fcrdet ihr welche Technik einsetzen?<\/h4><p>In welchem echten Arbeitskontext w\u00e4re eure Technik am n\u00fctzlichsten?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\u26a0\ufe0f Was hat die KI falsch gemacht?<\/h4><p>Halluzinationen? Falscher Ton? Wie h\u00e4ttet ihr das verhindern k\u00f6nnen?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83d\udcc8 Wie viele Versuche brauchtet ihr?<\/h4><p>Was hat das Verfeinern des Prompts bewirkt?<\/p><\/div>\n <div class=\"reflexion-card\"><h4>\ud83e\udd1d Aufwand vs. Ergebnis?<\/h4><p>Hat der aufwendigste Prompt das beste Ergebnis geliefert?<\/p><\/div>\n <\/div>\n <\/section>\n\n <footer>\n <p>\ud83c\udfc6 Prompt Battle \u2013 Gruppenarbeitsblatt<\/p>\n <p style=\"font-size:0.85rem; margin-top:0.4rem;\">Prompt Engineering Workshop \u00b7 5 Gruppen \u00b7 30 Minuten<\/p>\n <\/footer>\n<\/div>\n\n<script>\nconst GROUPS = [\n { id: 'a', label: '\ud83c\udfaf A \u2013 Zero-Shot', colorClass: 'gruppe-a', barColor: '#38bdf8' },\n { id: 'b', label: '\ud83d\udcda B \u2013 Few-Shot', colorClass: 'gruppe-b', barColor: '#a78bfa' },\n { id: 'c', label: '\ud83c\udfad C \u2013 Role', colorClass: 'gruppe-c', barColor: '#f472b6' },\n { id: 'd', label: '\ud83d\udd17 D \u2013 CoT', colorClass: 'gruppe-d', barColor: '#10b981' },\n { id: 'e', label: '\u2b50 E \u2013 Best-Practice',colorClass: 'gruppe-e', barColor: '#f59e0b' },\n];\nconst CRITERIA = ['vollstaendigkeit', 'nuetzlichkeit', 'stil', 'prompt'];\nconst RANK_EMOJIS = ['\ud83e\udd47', '\ud83e\udd48', '\ud83e\udd49', '4\ufe0f\u20e3', '5\ufe0f\u20e3'];\n\n\/\/ Build table rows\nconst tbody = document.getElementById('scoringBody');\nGROUPS.forEach(g => {\n const tr = document.createElement('tr');\n tr.id = 'row-' + g.id;\n\n \/\/ Name cell\n const nameTd = document.createElement('td');\n nameTd.innerHTML = `<span class=\"${g.colorClass}\">${g.label}<\/span>`;\n tr.appendChild(nameTd);\n\n \/\/ Star cells\n CRITERIA.forEach(c => {\n const td = document.createElement('td');\n td.innerHTML = buildStars(g.id, c);\n tr.appendChild(td);\n });\n\n \/\/ Total cell\n const totalTd = document.createElement('td');\n totalTd.id = 'total-' + g.id;\n totalTd.className = 'total-cell';\n totalTd.innerHTML = `\n <div class=\"progress-wrap\">\n <span id=\"num-${g.id}\">0<\/span>\n <span class=\"out-of\">\/ 20<\/span>\n <div class=\"progress-bar-outer\">\n <div class=\"progress-bar-inner\" id=\"bar-${g.id}\"><\/div>\n <\/div>\n <\/div>`;\n tr.appendChild(totalTd);\n\n \/\/ Rank cell\n const rankTd = document.createElement('td');\n rankTd.className = 'rank-cell';\n rankTd.id = 'rank-' + g.id;\n rankTd.textContent = '\u2013';\n tr.appendChild(rankTd);\n\n tbody.appendChild(tr);\n});\n\nfunction buildStars(groupId, criterion) {\n let html = `<div class=\"star-rating\">`;\n for (let i = 5; i >= 1; i--) {\n const id = `star-${groupId}-${criterion}-${i}`;\n html += `<input type=\"radio\" id=\"${id}\" name=\"score-${groupId}-${criterion}\" value=\"${i}\" onchange=\"updateScores()\">`;\n html += `<label for=\"${id}\" title=\"${i} Punkt${i>1?'e':''}\" aria-label=\"${i} Sterne\">\u2605<\/label>`;\n }\n html += `<\/div>`;\n return html;\n}\n\nfunction getScore(groupId, criterion) {\n const checked = document.querySelector(`input[name=\"score-${groupId}-${criterion}\"]:checked`);\n return checked ? parseInt(checked.value) : 0;\n}\n\nfunction getTotal(groupId) {\n return CRITERIA.reduce((sum, c) => sum + getScore(groupId, c), 0);\n}\n\nfunction updateScores() {\n const totals = GROUPS.map(g => ({ id: g.id, total: getTotal(g.id) }));\n\n \/\/ Update totals + bars\n totals.forEach(t => {\n document.getElementById('num-' + t.id).textContent = t.total;\n document.getElementById('bar-' + t.id).style.width = (t.total \/ 20 * 100) + '%';\n });\n\n \/\/ Compute ranks\n const sorted = [...totals].sort((a, b) => b.total - a.total);\n let currentRank = 1;\n sorted.forEach((item, idx) => {\n if (idx > 0 && item.total < sorted[idx - 1].total) currentRank = idx + 1;\n document.getElementById('rank-' + item.id).textContent = item.total === 0 ? '\u2013' : RANK_EMOJIS[currentRank - 1];\n });\n\n \/\/ Highlight winner row\n const maxScore = Math.max(...totals.map(t => t.total));\n GROUPS.forEach(g => {\n const row = document.getElementById('row-' + g.id);\n row.classList.toggle('is-winner', maxScore > 0 && getTotal(g.id) === maxScore);\n });\n\n \/\/ Update podium\n updatePodium(totals);\n}\n\nfunction updatePodium(totals) {\n const podium = document.getElementById('podium');\n const maxH = 160;\n const maxScore = Math.max(...totals.map(t => t.total), 1);\n\n podium.innerHTML = '';\n totals.forEach((t, i) => {\n const g = GROUPS.find(g => g.id === t.id);\n const height = t.total > 0 ? Math.max(20, (t.total \/ 20) * maxH) : 10;\n const div = document.createElement('div');\n div.className = 'podium-item';\n div.innerHTML = `\n <span class=\"podium-score\" style=\"color:${g.barColor}\">${t.total}<\/span>\n <div class=\"podium-bar\" style=\"height:${height}px; background:${g.barColor}22; border: 2px solid ${g.barColor}; border-bottom: none;\">\n <\/div>\n <span class=\"podium-label\" style=\"color:${g.barColor}\">${g.label.split(' ').slice(0,2).join(' ')}<\/span>\n `;\n podium.appendChild(div);\n });\n}\n\nfunction resetAll() {\n if (!confirm('Alle Punkte zur\u00fccksetzen?')) return;\n document.querySelectorAll('input[type=\"radio\"]').forEach(r => r.checked = false);\n GROUPS.forEach(g => {\n document.getElementById('num-' + g.id).textContent = '0';\n document.getElementById('bar-' + g.id).style.width = '0%';\n document.getElementById('rank-' + g.id).textContent = '\u2013';\n document.getElementById('row-' + g.id).classList.remove('is-winner');\n });\n updatePodium(GROUPS.map(g => ({ id: g.id, total: 0 })));\n}\n\n\/\/ Init podium\nupdatePodium(GROUPS.map(g => ({ id: g.id, total: 0 })));\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Prompt Battle - KI Marketing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/metalmotion.de\/kim\/89-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prompt Battle - KI Marketing\" \/>\n<meta property=\"og:description\" content=\"Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/metalmotion.de\/kim\/89-2\/\" \/>\n<meta property=\"og:site_name\" content=\"KI Marketing\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-08T10:59:10+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\",\"name\":\"Prompt Battle - KI Marketing\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/#website\"},\"datePublished\":\"2026-03-08T10:48:06+00:00\",\"dateModified\":\"2026-03-08T10:59:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/89-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prompt Battle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/#website\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/\",\"name\":\"KI Marketing\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/metalmotion.de\\\/kim\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n","yoast_head_json":{"title":"Prompt Battle - KI Marketing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/metalmotion.de\/kim\/89-2\/","og_locale":"de_DE","og_type":"article","og_title":"Prompt Battle - KI Marketing","og_description":"Prompt Battle \u2013 Gruppenaufgabe \ud83c\udfc6 Prompt Battle Gruppenaufgabe \u2013 Prompt Engineering Workshop \u23f1 30 Minuten \u00b7 \ud83d\udc65 3\u20135 Gruppen \u00b7 \ud83c\udfaf 5 Techniken im Wettbewerb \ud83d\udda8\ufe0f Arbeitsblatt drucken \ud83d\udccb Spielregeln Jede Gruppe erh\u00e4lt dieselbe Aufgabe, l\u00f6st sie aber mit einer unterschiedlichen Prompting-Technik. Am Ende pr\u00e4sentiert jede Gruppe ihren Prompt und die KI-Antwort. Die Klasse bewertet […]","og_url":"https:\/\/metalmotion.de\/kim\/89-2\/","og_site_name":"KI Marketing","article_modified_time":"2026-03-08T10:59:10+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/metalmotion.de\/kim\/89-2\/","url":"https:\/\/metalmotion.de\/kim\/89-2\/","name":"Prompt Battle - KI Marketing","isPartOf":{"@id":"https:\/\/metalmotion.de\/kim\/#website"},"datePublished":"2026-03-08T10:48:06+00:00","dateModified":"2026-03-08T10:59:10+00:00","breadcrumb":{"@id":"https:\/\/metalmotion.de\/kim\/89-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/metalmotion.de\/kim\/89-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/metalmotion.de\/kim\/89-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/metalmotion.de\/kim\/"},{"@type":"ListItem","position":2,"name":"Prompt Battle"}]},{"@type":"WebSite","@id":"https:\/\/metalmotion.de\/kim\/#website","url":"https:\/\/metalmotion.de\/kim\/","name":"KI Marketing","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/metalmotion.de\/kim\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":2,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/pages\/89\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/metalmotion.de\/kim\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}