Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- start [2025/03/23 08:57] – dennis.clausen@bbz-rd-eck.de
+++ start [2026/10/08 10:10] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ====== Willkommen im Wiki des BBZ Rendsburg-Eckernförde ======
-[[{conf.target}default|_blank]]
+~~NOTOC~~
-[[https://www.bbz-rd-eck.de/|{{ :wiki:logo.png?nolink&300 |Überraschung}}]]
+<HTML>
+<!--
+  KI-SEITE: Diese Seite ist bewusst in HTML aufgebaut (siehe CLAUDE.md,
+  Abschnitt "Wiki-Seiten: Wiki-Syntax oder HTML/JavaScript").
-----
+  Pflegehinweise:
-[[schulformen:start|{{:buttons:bildungsgaenge_infohubs.png?300}}
+  - Jede Kachel ist ein Link: <a class="bs-kachel" href="..."> mit Symbol
-[[:anleitungen_allgemein:uebersicht|{{:i_anleitungen.png?300|Anleitungen}}]]
+    (<span class="bs-symbol">), Titel (<strong>) und einer Zeile Beschreibung (<span>).
-[[lernprodukte:lernprodukte_best_practice|{{:i_lernprodukte.png?nolink&300|Lernprodukte}}]]
+  - Kacheln stehen in Bereichen: <section class="bs-bereich bs-b1"> ... </section>.
-[[:fortbildungen|{{:fortbildungen.png?nolink&300|Fortbildungen}}]]
+    Farbvarianten: bs-b1 (Blau), bs-b2 (Rot), bs-b3 (Grau).
-----
+  - Neue Kachel: eine vorhandene <a class="bs-kachel">-Zeile kopieren und
+    href, Symbol, Titel und Beschreibung anpassen.
+  - Externe Ziele zusaetzlich mit target="_blank" rel="noopener" versehen
+    und die Klasse bs-extern ergaenzen (zeigt den Pfeil oben rechts).
+  - Die Suche leitet an die normale Wiki-Suche (doku.php?do=search) weiter.
+-->
+<style>
+  .bs { --blau: #3C78BA; --blau-d: #2A5A94; --blau-h: #EAF1F9;
+        --rot: #E52A27; --rot-d: #B81F1C; --rot-h: #FCEDED;
+        --grau-d: #495057; --grau-h: #F1F3F5; --rand: #DDE3EA;
+        font-size: 19px; line-height: 1.5; margin: 0 0 2em; }
+  .bs * { box-sizing: border-box; }
-[[:tippsfaechergruppen|{{:i_teams.png?nolink&300|Lernprodukte}}]] [[https://viflow.bbz-rd-eck.de/viflow/?|{{:i_handbuch.png?nolink&300|ViFlow}}]] [[:orgahilfe|{{:i_orga.png?nolink&300|Hilfe zur Orga (z. B. digitales Klassenbuch)}}]]
+  /* Kopfbereich: Logo, Satz, Suche */
+  .bs-kopf { display: flex; align-items: center; gap: 1.6em; flex-wrap: wrap;
+             background: linear-gradient(135deg, var(--blau-h) 0%, #fff 70%);
+             border: 1px solid var(--rand); border-radius: 14px;
+             padding: 1.2em 1.6em; margin: 0.5em 0 2em; }
+  .bs-kopf a.bs-logo { display: block; flex: 0 0 auto; }
+  .bs-kopf a.bs-logo img { display: block; width: 170px; height: auto; }
+  .bs-kopf-text { flex: 1 1 280px; min-width: 0; }
+  .bs-kopf-text p { margin: 0 0 0.8em; font-size: 1.15em; color: #212529; }
+  .bs-suche { display: flex; gap: 0.5em; max-width: 520px; }
+  .bs-suche input[type=search] { flex: 1 1 auto; min-width: 0; padding: 0.55em 0.8em; font-size: 1em;
+                                 border: 2px solid var(--rand); border-radius: 8px; background: #fff; }
+  .bs-suche input[type=search]:focus { outline: none; border-color: var(--blau); }
+  .bs-suche button { padding: 0.55em 1.1em; font-size: 1em; font-weight: 600; cursor: pointer;
+                     color: #fff; background: var(--blau-d); border: 0; border-radius: 8px; }
+  .bs-suche button:hover { background: #1F4670; }
+  .bs-suche button:focus-visible, .bs-suche input:focus-visible { outline: 3px solid #1B1B1B; outline-offset: 2px; }
-----
+  /* Bereiche */
-[[bne:bne_start|{{:i_bne.png?nolink&300|BNE}}]] [[bgm:bgm_start|{{:i_bgm.png?nolink&300|BGM}}]] [[:kuenstliche_intelligenz|{{:i_kuenstlicheintelligenz.png?nolink&300|Künstliche Intelligenz}}]]
+  .bs-bereich { margin: 0 0 2.2em; }
-----
+  .bs-bereich h2.bs-titel { font-size: 1.45em; font-weight: 600; margin: 0 0 0.8em; padding: 0 0 0.35em;
+                            color: var(--f) !important; border-bottom: 3px solid var(--a); }
+  .bs-b1 { --f: var(--blau-d); --a: var(--blau); --h: var(--blau-h); }
+  .bs-b2 { --f: var(--rot-d);  --a: var(--rot);  --h: var(--rot-h); }
+  .bs-b3 { --f: var(--grau-d); --a: #868E96;     --h: var(--grau-h); }
+  /* Kacheln */
+  .bs-raster { display: grid; grid-template-columns: 1fr; gap: 1em; }
+  /* Vier Kacheln je Bereich: 4 nebeneinander, 2x2 oder untereinander - nie 3+1 */
+  .bs { container-type: inline-size; }
+  @container (min-width: 560px) { .bs-raster { grid-template-columns: repeat(2, 1fr); } }
+  @container (min-width: 1000px) { .bs-raster { grid-template-columns: repeat(4, 1fr); } }
+  a.bs-kachel { position: relative; display: flex; flex-direction: column; gap: 0.25em; min-height: 170px;
+                padding: 1em 1.1em; background: #fff; color: #212529 !important; text-decoration: none !important;
+                border: 1px solid var(--rand); border-top: 5px solid var(--a); border-radius: 10px;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.07); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
+  a.bs-kachel:hover, a.bs-kachel:focus { background: var(--h); transform: translateY(-2px);
+                                         box-shadow: 0 6px 14px rgba(0,0,0,0.14); }
+  a.bs-kachel:focus-visible { outline: 3px solid #1B1B1B; outline-offset: 2px; }
+  .bs-kachel .bs-symbol { font-size: 2.2em; line-height: 1.1; }
+  .bs-kachel strong { font-size: 1.2em; color: var(--f); line-height: 1.3; }
+  .bs-kachel span.bs-text { font-size: 1em; color: #495057; }
+  a.bs-extern::after { content: "\2197"; position: absolute; top: 0.6em; right: 0.8em;
+                       font-size: 1.1em; font-weight: 700; color: var(--f); }
+  @media (prefers-reduced-motion: reduce) { a.bs-kachel { transition: none; } a.bs-kachel:hover { transform: none; } }
+  @media (max-width: 480px) { .bs-kopf { padding: 1em; } .bs-kopf a.bs-logo img { width: 130px; } }
+</style>
+<div class="bs">
+  <div class="bs-kopf">
+    <a class="bs-logo" href="https://www.bbz-rd-eck.de/" target="_blank" rel="noopener" title="Zur Website des BBZ">
+      <img src="/lib/exe/fetch.php?media=wiki:logo.png" alt="BBZ Rendsburg-Eckernförde – zur Schulwebsite" width="170" height="124">
+    </a>
+    <div class="bs-kopf-text">
+      <p>Hier findest du Anleitungen, Materialien und Informationen rund um den Schulalltag am BBZ.</p>
+      <form class="bs-suche" role="search" action="/doku.php" method="get">
+        <input type="hidden" name="do" value="search">
+        <input type="search" name="q" placeholder="Im Wiki suchen …" aria-label="Im Wiki suchen">
+        <button type="submit">Suchen</button>
+      </form>
+    </div>
+  </div>
+  <section class="bs-bereich bs-b1">
+    <h2 class="bs-titel">Täglich gebraucht</h2>
+    <div class="bs-raster">
+      <a class="bs-kachel" href="/doku.php?id=anleitungen_allgemein:uebersicht">
+        <span class="bs-symbol">📖</span><strong>Anleitungen</strong>
+        <span class="bs-text">Apps und Werkzeuge des BBZ Schritt für Schritt erklärt</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=fortbildungen:angebote">
+        <span class="bs-symbol">🎓</span><strong>Fortbildungen</strong>
+        <span class="bs-text">Interne Angebote, externe Termine und Wunschfortbildungen</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=pausenaufsichtsplaner">
+        <span class="bs-symbol">🗓️</span><strong>Pausenaufsichten-Planer</strong>
+        <span class="bs-text">Pausenaufsichten planen und einsehen</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=orgahilfe">
+        <span class="bs-symbol">🗂️</span><strong>Orga-Hilfe</strong>
+        <span class="bs-text">Hilfen zur Organisation, z. B. digitales Klassenbuch</span>
+      </a>
+    </div>
+  </section>
+  <section class="bs-bereich bs-b2">
+    <h2 class="bs-titel">Unterricht und Bildungsgänge</h2>
+    <div class="bs-raster">
+      <a class="bs-kachel" href="/doku.php?id=schulformen:start">
+        <span class="bs-symbol">🧭</span><strong>Info-Hubs der Bildungsgänge</strong>
+        <span class="bs-text">Informationen und Links je Bildungsgang</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=lernprodukte:lernprodukte_best_practice">
+        <span class="bs-symbol">💡</span><strong>Lernprodukte</strong>
+        <span class="bs-text">Lernprodukte für den Unterricht und Best Practice</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=tippsfaechergruppen">
+        <span class="bs-symbol">👥</span><strong>Teams und Fächergruppen</strong>
+        <span class="bs-text">Tipps für die Arbeit in Fächergruppen und Teams</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=kuenstliche_intelligenz">
+        <span class="bs-symbol">🤖</span><strong>Künstliche Intelligenz</strong>
+        <span class="bs-text">Grundlagen, Prompting, fobizz, Recht und die Materialien vom Schulentwicklungstag</span>
+      </a>
+    </div>
+  </section>
+  <section class="bs-bereich bs-b3">
+    <h2 class="bs-titel">Schule und Gemeinschaft</h2>
+    <div class="bs-raster">
+      <a class="bs-kachel bs-extern" href="https://viflow.bbz-rd-eck.de/viflow/?" target="_blank" rel="noopener">
+        <span class="bs-symbol">📋</span><strong>ViFlow-Handbuch</strong>
+        <span class="bs-text">Prozesse und Regelungen des BBZ (öffnet in neuem Fenster)</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=bne:bne_start">
+        <span class="bs-symbol">🌱</span><strong>BNE</strong>
+        <span class="bs-text">Bildung für nachhaltige Entwicklung am BBZ</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=bgm:bgm_start">
+        <span class="bs-symbol">💚</span><strong>BGM</strong>
+        <span class="bs-text">Betriebliches Gesundheitsmanagement</span>
+      </a>
+      <a class="bs-kachel" href="/doku.php?id=bbz_kiosk_rd">
+        <span class="bs-symbol">🥪</span><strong>BBZ Kiosk</strong>
+        <span class="bs-text">Preislisten des Kiosks in der Kieler Straße</span>
+      </a>
+    </div>
+  </section>
+</div>
+</HTML>
-[[:bbz_kiosk_rd|{{:i_kiosk.png?nolink&300|Preislisten des BBZ Kiosk in der Kieler Straße}}]]