Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- formulare:orientierungstage:orientierungstage [2026/10/05 09:40] – angelegt - Externe Bearbeitung 127.0.0.1
+++ formulare:orientierungstage:orientierungstage [2026/10/05 09:55] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ====== Orientierungstage ======
-Diese Seite fasst den Ablauf für die Orientierungstage im beruflichen
+<html>
-Gymnasium zusammen: von der Anmeldung durch interessierte Schüler:innen
+<!--
-abgebender Schulen bis zur Sichtung und Bestätigung durch die
+  KI-SEITE: Diese Seite ist bewusst in HTML aufgebaut (siehe CLAUDE.md,
-Abteilungsleitung.
+  Abschnitt "Wiki-Seiten: Wiki-Syntax oder HTML/JavaScript").
+  Pflegehinweise: Die Ueberschriften der Abschnitte stehen in normaler
+  Wiki-Syntax (damit das Inhaltsverzeichnis funktioniert), alles dazwischen
+  sind HTML-Bloecke. Einen Ablauf-Schritt ergaenzt man, indem man in der
+  Kartenreihe ein <div class="ot-step"> kopiert (Nummer, Titel, Text, Knopf
+  anpassen). Die gemeinsamen Stile stehen im <style>-Block direkt darunter.
+-->
+<style>
+  .ot-wrap { --ot-blue:#3974B9; --ot-line:#dee2e6; --ot-soft:#f8f9fa; --ot-text:#343a40; --ot-muted:#6c757d; color:var(--ot-text); line-height:1.6; }
+  .ot-hero { background:linear-gradient(135deg,#3974B9 0%,#764ba2 100%); color:#fff; border-radius:12px; padding:1.6rem 1.8rem; margin:0.5rem 0 1.6rem; box-shadow:0 4px 14px rgba(57,116,185,0.25); }
+  .ot-hero h2 { color:#fff !important; border:0 !important; margin:0 0 0.5rem !important; padding:0 !important; font-size:1.35rem; }
+  .ot-hero p { margin:0 0 1.1rem; font-size:1.02rem; max-width:48rem; }
+  .ot-btns { display:flex; flex-wrap:wrap; gap:0.6rem; }
+  .ot-btn { display:inline-block; padding:0.55rem 1.1rem; border-radius:6px; text-decoration:none !important; font-weight:600; font-size:0.95rem; color:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,0.18); }
+  .ot-btn.light { background:#fff; color:#3974B9 !important; }
+  .ot-btn.ghost { background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.55); box-shadow:none; }
+  .ot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:0.5rem 0 1.8rem; }
+  .ot-step { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--ot-line); border-top:4px solid var(--ot-blue); border-radius:10px; padding:1.1rem 1.2rem 1.2rem; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
+  .ot-num { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--ot-blue); color:#fff; font-weight:700; margin-bottom:0.6rem; }
+  .ot-step h3 { margin:0 0 0.4rem !important; padding:0 !important; border:0 !important; font-size:1.08rem; }
+  .ot-step p { margin:0 0 0.8rem; font-size:0.95rem; }
+  .ot-step ul { margin:0 0 0.9rem 1.1rem; padding:0; font-size:0.93rem; }
+  .ot-step .ot-btn { margin-top:auto; align-self:flex-start; }
+  .ot-who { display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ot-muted); margin-bottom:0.15rem; }
+  .ot-note { border-radius:8px; padding:0.85rem 1.1rem; margin:0.5rem 0 1.6rem; border:1px solid; }
+  .ot-note.warn { background:#fff3cd; border-color:#ffe69c; color:#664d03; }
+  .ot-note.info { background:#e7f1ff; border-color:#b6d4fe; color:#052c65; }
+  .ot-note strong { display:block; margin-bottom:0.15rem; }
+  .ot-table { width:100%; border-collapse:collapse; margin:0.5rem 0 1.8rem; font-size:0.95rem; }
+  .ot-table th { text-align:left; background:var(--ot-soft); border-bottom:2px solid var(--ot-line); padding:0.6rem 0.8rem; }
+  .ot-table td { border-bottom:1px solid var(--ot-line); padding:0.6rem 0.8rem; vertical-align:top; }
+  .ot-table td:first-child { white-space:nowrap; font-weight:600; }
+  .ot-check { list-style:none; margin:0.5rem 0 1.2rem; padding:0; counter-reset:ot; }
+  .ot-check li { counter-increment:ot; position:relative; background:var(--ot-soft); border:1px solid var(--ot-line); border-radius:8px; padding:0.8rem 1rem 0.8rem 3.2rem; margin-bottom:0.6rem; }
+  .ot-check li::before { content:counter(ot); position:absolute; left:0.9rem; top:0.8rem; width:1.6rem; height:1.6rem; border-radius:50%; background:#198754; color:#fff; font-weight:700; text-align:center; line-height:1.6rem; font-size:0.9rem; }
+  .ot-check a { font-weight:600; }
+  .ot-foot { color:var(--ot-muted); font-size:0.9rem; border-top:1px solid var(--ot-line); padding-top:0.9rem; margin-top:1.5rem; }
+</style>
-===== Ablauf =====
+<div class="ot-wrap">
+  <div class="ot-hero">
-**Schritt 1 — Interessierte melden sich über das Formular an**
+    <h2>Orientierungstage im beruflichen Gymnasium</h2>
+    <p>Interessierte Schüler:innen abgebender Schulen melden sich online an, die Abteilungsleitung ordnet sie einer Klasse und einem Termin zu und informiert sie per E-Mail – alles an einem Ort, ohne Tabellen und Einzelmails von Hand.</p>
+    <div class="ot-btns">
+      <a class="ot-btn light" href="?id=formulare:orientierungstage:anmeldung">📝 Zum Anmeldeformular</a>
+      <a class="ot-btn ghost" href="?id=formulare:orientierungstage:auswertung">📋 Zur Auswertung</a>
+    </div>
+  </div>
+</div>
+</html>
-Schüler:innen abgebender Schulen tragen ihre Daten, ihr gewünschtes Profil
+===== Der Ablauf im Überblick =====
-und zwei Terminwünsche selbst in das Anmeldeformular ein:
 <html>
-<div style="display:flex; flex-wrap:wrap; gap:0.6rem; margin:0.5rem 0 1.2rem;">
+<div class="ot-wrap">
-  <a href="?id=formulare:orientierungstage:anmeldung"
+  <div class="ot-grid">
-     style="display:inline-block; background:#3974B9; color:#fff !important;
-            padding:0.6rem 1.2rem; border-radius:6px; text-decoration:none !important;
-            font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
-    📝 Anmeldeformular Orientierungstag
-  </a>
-</div>
-</html>
-Nach dem Absenden erhält die/der Bewerber:in automatisch eine
+    <div class="ot-step">
-Bestätigungsmail, und die in den Einstellungen hinterlegte(n) Adresse(n)
+      <span class="ot-num">1</span>
-werden über die neue Anmeldung informiert.
+      <span class="ot-who">Schüler:innen</span>
+      <h3>Anmelden</h3>
+      <p>Die Schüler:innen tragen Daten, Wunschprofil und zwei Terminwünsche selbst im Formular ein. Die angebotenen Termine hängen vom gewählten Profil ab.</p>
+      <ul>
+        <li>Bestätigungsmail an die angemeldete Person</li>
+        <li>Benachrichtigung an die Zuständigkeit des Profils</li>
+      </ul>
+      <a class="ot-btn" style="background:#764ba2;" href="?id=formulare:orientierungstage:anmeldung">📝 Anmeldeformular</a>
+    </div>
-**Schritt 2 — Abteilungsleitung sichtet die Anmeldungen**
+    <div class="ot-step">
+      <span class="ot-num">2</span>
+      <span class="ot-who">Abteilungsleitung</span>
+      <h3>Sichten</h3>
+      <p>Alle Anmeldungen des laufenden Schuljahres stehen in einer Liste, die sich nach Profil, Standort, Schule und Zuordnungsstand filtern lässt.</p>
+      <ul>
+        <li>✅ = vollständig zugeordnet</li>
+        <li>❌ = Klasse, Termin oder Uhrzeit fehlt noch</li>
+      </ul>
+      <a class="ot-btn" style="background:#3974B9;" href="?id=formulare:orientierungstage:auswertung">📋 Auswertung</a>
+    </div>
-Alle eingegangenen Anmeldungen werden automatisch gesammelt und lassen sich
+    <div class="ot-step">
-hier einsehen — insgesamt und je Profil:
+      <span class="ot-num">3</span>
+      <span class="ot-who">Abteilungsleitung</span>
+      <h3>Zuordnen</h3>
+      <p>Zuerst wird die Klasse gewählt, danach Termin und Uhrzeit aus den für diese Klasse hinterlegten Terminen. Die Kapazität einer Klasse ist ein Richtwert und darf überschritten werden.</p>
+      <ul>
+        <li>Jede Änderung löst automatisch eine Änderungsmail aus</li>
+      </ul>
+      <a class="ot-btn" style="background:#198754;" href="?id=formulare:orientierungstage:zuordnung">👥 Zuordnung</a>
+    </div>
-<html>
+    <div class="ot-step">
-<div style="display:flex; flex-wrap:wrap; gap:0.6rem; margin:0.5rem 0 1.2rem;">
+      <span class="ot-num">4</span>
-  <a href="?id=formulare:orientierungstage:auswertung"
+      <span class="ot-who">Abteilungsleitung</span>
-     style="display:inline-block; background:#0d6efd; color:#fff !important;
+      <h3>Termine im Blick behalten</h3>
-            padding:0.6rem 1.2rem; border-radius:6px; text-decoration:none !important;
+      <p>Die Terminübersicht gruppiert alle zugeordneten Personen nach Klasse und Termin. Muss ein Tag verschoben werden, lässt sich die ganze Gruppe auf einmal umbuchen und benachrichtigen.</p>
-            font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
+      <a class="ot-btn" style="background:#20c997;" href="?id=formulare:orientierungstage:terminuebersicht">📅 Terminübersicht</a>
-    📋 Auswertung Anmeldungen
+    </div>
-  </a>
-</div>
-</html>
-<html>
+    <div class="ot-step">
-<div style="background:#fff3cd; border:1px solid #ffe69c; border-radius:6px;
+      <span class="ot-num">5</span>
-            padding:0.75rem 1rem; margin:1rem 0; color:#664d03;">
+      <span class="ot-who">Abteilungsleitung</span>
-  <strong>Zugriff:</strong> Die Auswertungsseite ist per Zugriffsverwaltung
+      <h3>Informieren</h3>
-  auf Abteilungsleitung und Teamleitung beschränkt, da dort personenbezogene
+      <p>Die Infomail geht per Knopfdruck an alle zugeordneten Personen. Platzhalter wie Name, Termin und Klasse werden pro Empfänger:in ersetzt, der Stundenplan der Klasse hängt als Datei an.</p>
-  Daten der Bewerber:innen einsehbar sind.
+      <ul>
+        <li>Texte von Info- und Änderungsmail sind anpassbar</li>
+      </ul>
+      <a class="ot-btn" style="background:#fd7e14;" href="?id=formulare:orientierungstage:infomail">✉️ Infomail</a>
+    </div>
+  </div>
+  <div class="ot-note warn">
+    <strong>Zugriff</strong>
+    Auswertung, Zuordnung, Terminübersicht, Infomail, Einstellungen und Archiv sind per Zugriffsverwaltung auf Abteilungsleitung und Teamleitung beschränkt, da dort personenbezogene Daten der Bewerber:innen einsehbar sind. Nur das Anmeldeformular ist öffentlich.
+  </div>
 </div>
 </html>
-**Schritt 3 — Termin bestätigen**
-Der Orientierungstag findet erst nach Zustimmung der jeweiligen
-Abteilungsleitung statt. Die Einladung mit dem bestätigten Termin erfolgt
-aktuell manuell per E-Mail direkt an die/den Bewerber:in (die E-Mail-Adresse
-findet sich in der Auswertung).
 ===== Jährliche Vorbereitung =====
-Vor dem nächsten Durchlauf müssen die Termine im Anmeldeformular aktualisiert
+Vor jedem neuen Durchlauf müssen die Klassen und ihre Termine angepasst werden – das Anmeldeformular selbst muss dafür nicht bearbeitet werden, es aktualisiert sich automatisch. Die Einstellungen sind in drei Bereiche gegliedert:
-werden — das Formular selbst muss dafür nicht bearbeitet werden. Auf der
-gleichen Seite lassen sich auch die Benachrichtigungs-Adressen und (selten
-nötig) die Profile ändern:
 <html>
-<div style="display:flex; flex-wrap:wrap; gap:0.6rem; margin:0.5rem 0 1.2rem;">
+<div class="ot-wrap">
-  <a href="?id=formulare:orientierungstage:einstellungen"
+  <ol class="ot-check">
-     style="display:inline-block; background:#6c757d; color:#fff !important;
+    <li><a href="?id=formulare:orientierungstage:einstellungen">Klassen verwalten</a><br>
-            padding:0.6rem 1.2rem; border-radius:6px; text-decoration:none !important;
+      Pro Profil eine oder mehrere Klassen anlegen oder bestehende bearbeiten: Name, Termine (ein Termin pro Zeile), Kapazität als Richtwert und optional der Stundenplan als PDF oder Bild.</li>
-            font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
+    <li><a href="?id=formulare:orientierungstage:einstellungen_zustaendigkeiten">Zuständigkeiten</a><br>
-    ⚙️ Einstellungen
+      Für jedes Profil eine E-Mail-Adresse (und optional CC) hinterlegen. Nur diese Adresse wird bei einer Neuanmeldung für das Profil benachrichtigt und ist die Antwortadresse der Mails an die Schüler:innen. Ohne Eintrag gibt es keine Benachrichtigung.</li>
-  </a>
+    <li><a href="?id=formulare:orientierungstage:einstellungen_profile">Profile ändern</a><br>
+      Nur nötig, wenn sich das Angebot der Profile ändert. Jedes Profil trägt den Standort in Klammern am Ende, daran erkennt das System den Standort für die Auswertung.</li>
+  </ol>
+  <div class="ot-btns" style="margin-bottom:1.8rem;">
+    <a class="ot-btn" style="background:#6c757d;" href="?id=formulare:orientierungstage:einstellungen">⚙️ Zu den Einstellungen</a>
+  </div>
 </div>
 </html>
-----
+===== Wer bekommt wann welche E-Mail? =====
-Erstellt am: 2026/09/15\\
+<html>
-Prozessverantwortlich: Till Gades [[till-niels.gades@bbz-rd-eck.de]]
+<div class="ot-wrap">
+  <table class="ot-table">
+    <thead>
+      <tr><th>Anlass</th><th>Empfänger:in</th><th>Inhalt</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Neue Anmeldung</td><td>Schüler:in<br>Zuständigkeit des Profils</td><td>Bestätigung der eingetragenen Daten bzw. Hinweis auf die neue Anmeldung</td></tr>
+      <tr><td>Zuordnung oder Terminänderung</td><td>betroffene Person</td><td>Änderungsmail mit Klasse, Termin, Uhrzeit und – falls hinterlegt – dem Stundenplan als Anhang</td></tr>
+      <tr><td>Infomail (Knopfdruck)</td><td>alle zugeordneten Personen</td><td>frei formulierbarer Text mit Platzhaltern, Stundenplan als Anhang</td></tr>
+    </tbody>
+  </table>
+  <div class="ot-note info">
+    <strong>Datenschutz</strong>
+    Anmeldungen werden verschlüsselt gespeichert, getrennt nach Schuljahr. Vergangene Schuljahre lassen sich im <a href="?id=formulare:orientierungstage:archiv">Archiv</a> nachschlagen, aber nicht mehr bearbeiten. Drei Jahre nach Ende eines Schuljahres werden die Anmeldungen automatisch gelöscht.
+  </div>
+  <div class="ot-foot">
+    Erstellt am: 2026/09/15 · Überarbeitet am: 2026/10/05<br>
+    Prozessverantwortlich: Till Gades <a href="mailto:till-niels.gades@bbz-rd-eck.de">till-niels.gades@bbz-rd-eck.de</a>
+  </div>
+</div>
+</html>