diff --git a/pruef-buehne.png b/pruef-buehne.png
index 4c0787aa..7df4d02d 100644
Binary files a/pruef-buehne.png and b/pruef-buehne.png differ
diff --git a/pruef-kalender-computer.png b/pruef-kalender-computer.png
index f411aaeb..16d48593 100644
Binary files a/pruef-kalender-computer.png and b/pruef-kalender-computer.png differ
diff --git a/pruef-kalender-handy.png b/pruef-kalender-handy.png
index de9cb9c0..9a2a2048 100644
Binary files a/pruef-kalender-handy.png and b/pruef-kalender-handy.png differ
diff --git a/pruef-start-computer.png b/pruef-start-computer.png
index 737c2747..ef37233c 100644
Binary files a/pruef-start-computer.png and b/pruef-start-computer.png differ
diff --git a/pruef-start-creator.png b/pruef-start-creator.png
index c029cda7..2da7e652 100644
Binary files a/pruef-start-creator.png and b/pruef-start-creator.png differ
diff --git a/pruef-start-handy.png b/pruef-start-handy.png
index 03ac1656..d8b853b4 100644
Binary files a/pruef-start-handy.png and b/pruef-start-handy.png differ
diff --git a/pruef-steckbrief.png b/pruef-steckbrief.png
new file mode 100644
index 00000000..97203090
Binary files /dev/null and b/pruef-steckbrief.png differ
diff --git a/server/pruef-buehne.mjs b/server/pruef-buehne.mjs
index e25d7576..4b52958f 100644
--- a/server/pruef-buehne.mjs
+++ b/server/pruef-buehne.mjs
@@ -150,11 +150,32 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
if (r.top < 0 || r.bottom > window.innerHeight) continue;
const mitte = r.top + r.height / 2;
- const kandidaten = [
+ const st0 = getComputedStyle(e);
+ const kandidaten = [];
+
+ /* ZUERST IN DER EIGENEN POLSTERUNG.
+
+ Zweiter Fund an derselben Pruefung: Sie tastete ausschliesslich
+ NEBEN dem Element ab. Traegt der Text seine Flaeche aber selbst
+ (eine Beschriftung mit eigenem Hintergrund und Polsterung), dann
+ liegt jeder Punkt daneben schon auf dem Hintergrundbild -- und
+ gemeldet wurde 1,89:1, obwohl der Text auf einer deckenden
+ Flaeche steht und tadellos lesbar ist.
+
+ Der Untergrund eines Textes ist das, worauf er WIRKLICH liegt.
+ Hat das Element genug Polsterung, wird dort gemessen: innen,
+ aber sicher neben jedem Buchstaben. */
+ const pl = parseFloat(st0.paddingLeft) || 0;
+ const pt = parseFloat(st0.paddingTop) || 0;
+ if (pt >= 5) kandidaten.push([r.left + r.width / 2, r.top + pt / 2]);
+ if (pl >= 7) kandidaten.push([r.left + pl / 2, mitte]);
+
+ /* Danach wie bisher rings herum. */
+ kandidaten.push(
[r.right + 4, mitte], [r.right + 14, mitte],
[r.left - 4, mitte], [r.left - 14, mitte],
[r.left + r.width / 2, r.top - 3], [r.left + r.width / 2, r.bottom + 3],
- ];
+ );
let p = null;
for (const [kx, ky] of kandidaten) {
if (kx < 0 || ky < 0 || kx >= window.innerWidth || ky >= window.innerHeight) continue;
@@ -169,7 +190,7 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
behauptet, etwas geprüft zu haben. */
if (!p) { ohneStelle++; continue; }
- const st = getComputedStyle(e);
+ const st = st0;
const farbe = st.color.match(/\d+/g).slice(0, 3).map(Number);
const gr = parseFloat(st.fontSize);
const fett = Number(st.fontWeight) >= 700;
diff --git a/tools/buehne-bauen.mjs b/tools/buehne-bauen.mjs
index 61a62b52..33558fec 100644
--- a/tools/buehne-bauen.mjs
+++ b/tools/buehne-bauen.mjs
@@ -100,11 +100,14 @@ const AUFTRAEGE = [
Zug DICHTER geworden sind (siehe --glas in gate.css). Der Text
steht dadurch auf eigener Flaeche statt direkt auf dem Bild --
das Bild darf hell sein, ohne die Lesbarkeit anzugreifen. */
- helligkeit: 0.66, saettigung: 1.08, kontrast: 1.04,
- /* Die Vignette macht die Mitte ruhig, in der der Inhalt steht.
- Schwaecher als vorher (0.52 statt 0.72), weil die Flaechen die
- Arbeit jetzt selbst machen. */
- vignette: { x: 0.5, y: 0.42, rx: 0.5, ry: 0.66, staerke: 0.52 },
+ /* Dritter Anlauf am 01.09.2026, und diesmal deutlich: 0.42 -> 0.66
+ war noch zu wenig. Jetzt 0.88 mit mehr Kontrast und Farbe -- die
+ Szene ist ein BILD, kein Nebel. Tragen kann sie das, weil aller
+ Text auf eigenen, deckenden Flaechen steht (--flaeche). */
+ helligkeit: 0.88, saettigung: 1.16, kontrast: 1.1,
+ /* Kein dunkler Fleck mehr in der Mitte -- stattdessen laufen die
+ RAENDER weich ins Dunkle. Siehe die Begruendung weiter unten. */
+ randvignette: { beginn: 0.5, staerke: 0.78 },
/* Oben ausblenden: dort sitzt die Kopfleiste. */
verlauf: [{ von: [0, 0], nach: [0, 0.14], stopps: [[0, 0.55], [1, 0]] }],
guete: 0.72,
@@ -116,8 +119,8 @@ const AUFTRAEGE = [
ausschnitt: schmalA,
/* Auf dem Handy etwas zurueckhaltender als am Rechner: Der Text
nimmt dort fast die ganze Flaeche ein, das Bild traegt weniger. */
- helligkeit: 0.56, saettigung: 1.02, kontrast: 1.03,
- vignette: { x: 0.5, y: 0.45, rx: 0.72, ry: 0.64, staerke: 0.6 },
+ helligkeit: 0.74, saettigung: 1.1, kontrast: 1.06,
+ randvignette: { beginn: 0.42, staerke: 0.8 },
verlauf: [{ von: [0, 0], nach: [0, 0.12], stopps: [[0, 0.55], [1, 0]] }],
guete: 0.68,
},
@@ -214,6 +217,34 @@ for (const a of AUFTRAEGE) {
/* Vignette: dunkler Fleck in der Mitte. Er wird DRAUFGEMALT (nicht
ausradiert), damit dort, wo der Text steht, wirklich Ruhe ist. */
+ /* DIE VIGNETTE LIEGT AUSSEN, NICHT IN DER MITTE.
+
+ Bis zum 01.09.2026 wurde die MITTE abgedunkelt -- also genau der
+ Teil, in dem die Szene steht. Ergebnis: Man sah nur die Raender
+ des Bildes, und die Mitte war ein grauer Fleck. Genau das meinte
+ Filipe mit "sieht ganz komisch aus".
+
+ Richtig herum ist es andersherum, so wie in der Fotografie: Die
+ Raender laufen weich ins Dunkle, die MITTE bleibt hell und klar.
+ Das Bild bekommt dadurch Tiefe statt Nebel. Moeglich ist das,
+ seit der Text auf eigenen Flaechen steht (--flaeche) und nicht
+ mehr direkt auf dem Bild liegt. */
+ if (a.randvignette) {
+ const v = a.randvignette;
+ g.save();
+ g.translate(0.5 * a.breite, 0.5 * a.hoehe);
+ /* Ueber die Diagonale skaliert, damit die Ecken wirklich erfasst
+ werden -- bei einem Kreis ueber die Breite blieben sie hell. */
+ g.scale(a.breite * 0.78, a.hoehe * 0.78);
+ const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
+ gr.addColorStop(0, "rgba(5,7,13,0)");
+ gr.addColorStop(v.beginn ?? 0.55, "rgba(5,7,13,0)");
+ gr.addColorStop(1, `rgba(5,7,13,${v.staerke})`);
+ g.fillStyle = gr;
+ g.fillRect(-1.4, -1.4, 2.8, 2.8);
+ g.restore();
+ }
+
if (a.vignette) {
const v = a.vignette;
g.save();
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index d66da1b4..476e1202 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -50,8 +50,18 @@ body.start::before {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
- background-position: center bottom;
- background-size: 138% auto;
+ /* cover statt "138% auto". Der alte Wert war der eigentliche Fehler:
+ Bei 138 % Fensterbreite wurde das Bild auf einem 2540 px breiten
+ Schirm 3500 px breit und knapp 2000 px hoch -- in einem 1300 px
+ hohen Fenster fehlten damit 700 px, und zwar oben. Genau deshalb
+ waren die Figuren riesig und ihre Koepfe abgeschnitten.
+
+ cover fuellt die Flaeche IMMER vollstaendig und skaliert dabei so
+ wenig wie noetig. Die Verankerung liegt auf 50 % 42 %: etwas ueber
+ der Mitte, weil dort in allen neun Szenen die Gesichter sitzen --
+ wenn etwas beschnitten werden muss, dann Fussboden und Decke. */
+ background-position: 50% 42%;
+ background-size: cover;
/* Rueckfall, falls eine Seite keine eigene Szene hat. */
background-image: url("../img/buehne-studio-breit.webp");
}
@@ -99,11 +109,47 @@ body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-
body.start > .schleier {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
- linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .58) 13%,
- rgba(5, 7, 13, .44) 48%, rgba(5, 7, 13, .66) 100%),
- radial-gradient(70% 55% at 18% 8%, rgba(63, 189, 245, .06), transparent 70%),
- radial-gradient(70% 60% at 88% 96%, rgba(138, 118, 255, .07), transparent 72%),
- radial-gradient(56% 68% at 50% 46%, rgba(5, 7, 13, .66), transparent 84%);
+ /* NUR NOCH DIE RAENDER. Der Schleier legte vorher .86/.58/.44
+ Schwarz ueber das ganze Bild -- also auch ueber die Mitte, in der
+ die Szene steht, und das ZUSAETZLICH zur Vignette, die dort
+ ebenfalls dunkel war. Zwei Schichten Dunkelheit uebereinander,
+ genau an der Stelle, die man sehen will.
+
+ Jetzt: oben ein Streifen (dort sitzt die Kopfleiste), unten ein
+ Streifen (dort laeuft die Seite aus), die Mitte fast frei. Der
+ Text braucht das nicht mehr -- er steht auf eigenen Flaechen. */
+ linear-gradient(180deg,
+ rgba(5, 7, 13, .82) 0%,
+ rgba(5, 7, 13, .34) 12%,
+ rgba(5, 7, 13, .12) 40%,
+ rgba(5, 7, 13, .12) 62%,
+ rgba(5, 7, 13, .52) 100%),
+ /* Zwei sehr weiche Farbschimmer in den gegenueberliegenden Ecken.
+ Sie nehmen dem Bild das reine Schwarz und geben ihm Tiefe, ohne
+ eine einzige Farbe zu verfaelschen -- 5 bis 7 Prozent. */
+ radial-gradient(75% 60% at 12% 4%, rgba(63, 189, 245, .07), transparent 70%),
+ radial-gradient(75% 65% at 90% 98%, rgba(138, 118, 255, .08), transparent 72%),
+ /* DIE LESESPUR — und der eigentliche Kniff.
+
+ In allen neun Szenen stehen HasiDog und DogFather AUSSEN, die
+ Mitte ist frei. Genau danach wurden die Bilder ausgesucht. Diese
+ Aufteilung wird jetzt benutzt, statt gegen sie zu arbeiten:
+
+ aussen das Bild bleibt hell und scharf -- dort stehen die
+ Figuren, und die sollen zu sehen sein
+ mitte gedaempft -- dort steht der Text
+
+ Vorher wurde entweder alles abgedunkelt (dann war das Bild
+ Nebel) oder gar nichts (dann war Schrift auf einer hellen Stelle
+ unlesbar, gemessene 1,08:1). Beides falsch. Der Rand bleibt in
+ jedem Fenster mindestens 380 px breit klar -- genug fuer die
+ Figuren, egal wie breit der Schirm ist. */
+ linear-gradient(90deg,
+ rgba(5, 7, 13, 0) 0,
+ rgba(5, 7, 13, .8) min(22%, 400px),
+ rgba(5, 7, 13, .86) 50%,
+ rgba(5, 7, 13, .8) max(78%, calc(100% - 400px)),
+ rgba(5, 7, 13, 0) 100%);
}
/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
@@ -118,6 +164,7 @@ body.start > main { position: relative; z-index: 1; }
body.start::before {
background-image: url("../img/buehne-studio-schmal.webp");
background-size: cover;
+ background-position: 50% 38%;
}
body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-schmal.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-schmal.webp"); }
@@ -130,10 +177,10 @@ body.start > main { position: relative; z-index: 1; }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-schmal.webp"); }
body.start > .schleier {
background:
- linear-gradient(180deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .74) 15%,
- rgba(5, 7, 13, .7) 60%, rgba(5, 7, 13, .84) 100%),
- radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .05), transparent 70%),
- radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .06), transparent 72%);
+ linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .48) 14%,
+ rgba(5, 7, 13, .3) 55%, rgba(5, 7, 13, .66) 100%),
+ radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .06), transparent 70%),
+ radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .07), transparent 72%);
}
}
@@ -1283,3 +1330,136 @@ body.start > main { position: relative; z-index: 1; }
background: linear-gradient(90deg, var(--akzent), transparent);
opacity: .8;
}
+
+/* =====================================================================
+ LESEZONEN — Text auf einem hellen Bild
+
+ Seit die Buehnen wirklich hell sind, reicht "dunkler Text auf dunklem
+ Grund" nicht mehr: Wo kein Kasten liegt, steht Schrift direkt auf dem
+ Bild. Die Kontrastmessung an echten Bildpunkten hat das sofort
+ gemeldet -- 1,08:1 an einer hellen Stelle. Unlesbar.
+
+ Die billige Loesung waere, das Bild wieder abzudunkeln. Damit waere
+ man aber wieder da, wo man angefangen hat.
+
+ Die richtige: Der Untergrund wird NUR DORT abgedunkelt, wo Text
+ steht -- und zwar mit backdrop-filter. Der Hintergrund bleibt in
+ Farbe und Form sichtbar, wird an dieser Stelle aber weichgezeichnet
+ und gedimmt. Das ist dieselbe Technik, die hochwertige Oberflaechen
+ fuer ihre Leisten benutzen: Man sieht, dass da etwas ist, aber es
+ stoert nicht mehr.
+
+ Faellt backdrop-filter aus (aeltere Browser), traegt der Verlauf
+ darunter die Lesbarkeit allein -- deshalb steht er da und ist nicht
+ nur Beiwerk.
+ ===================================================================== */
+
+body.start .willkommen,
+body.start .kopf-zeile,
+body.start .k-kopf {
+ padding: 20px 24px;
+ border-radius: var(--radius);
+ background: linear-gradient(180deg, rgba(6, 9, 16, .74), rgba(6, 9, 16, .58));
+ backdrop-filter: blur(14px) saturate(.9);
+ -webkit-backdrop-filter: blur(14px) saturate(.9);
+}
+/* Die Trennlinie darunter war fuer eine Zeile ohne Flaeche gedacht.
+ Auf einer eigenen Flaeche waere sie eine Kante zu viel. */
+body.start .willkommen { border-bottom: 0; margin-bottom: 26px; }
+body.start .kopf-zeile,
+body.start .k-kopf { border-bottom: 0; }
+
+/* Die Gruppenueberschriften auf der Startseite stehen frei zwischen den
+ Kacheln. Sie bekommen keinen Kasten (das waeren drei weitere Kaesten),
+ sondern nur einen schmalen, weich auslaufenden Traeger. */
+body.start .gruppe__kopf {
+ position: relative;
+ padding: 7px 14px;
+ margin-left: -14px;
+ border-radius: 999px;
+ width: fit-content; max-width: 100%;
+ background: linear-gradient(90deg, rgba(6, 9, 16, .72), rgba(6, 9, 16, .3) 82%, transparent);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+/* Der Fusstext und freistehende Hinweise brauchen dasselbe. */
+body.start .inhalt .fuss,
+body.start .leer-hinweis,
+body.start .protokoll-block,
+body.start .zahlen-block,
+body.start .dran {
+ position: relative;
+}
+body.start .inhalt .fuss {
+ padding: 14px 16px;
+ border-radius: var(--radius-klein);
+ background: rgba(6, 9, 16, .6);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+/* Listen und Bloecke, die bisher gar keine Flaeche hatten (Protokolle,
+ Verlaeufe, Tabellenzeilen) -- sie liegen jetzt auf --flaeche wie
+ alles andere. */
+body.start #protokoll,
+body.start #liste > .leise,
+body.start .verlauf {
+ border-radius: var(--radius-klein);
+}
+
+@media (max-width: 620px) {
+ body.start .willkommen,
+ body.start .kopf-zeile,
+ body.start .k-kopf { padding: 16px 15px; }
+ body.start .gruppe__kopf { margin-left: -10px; padding: 6px 11px; }
+}
+
+/* Ohne backdrop-filter (Kontrastmodus, aeltere Browser) muss der
+ Verlauf allein tragen -- deshalb wird er dort deckend. */
+@media (forced-colors: active) {
+ body.start .willkommen,
+ body.start .kopf-zeile,
+ body.start .k-kopf,
+ body.start .gruppe__kopf { background: Canvas; }
+}
+
+/* Die letzten drei freistehenden Textstellen, die die Kontrastmessung
+ nach dem Aufhellen noch gefunden hat. Alle drei sind Beschriftungen
+ ohne eigene Flaeche -- sie bekommen dieselbe schmale Lesezone wie die
+ Gruppenueberschriften. */
+body.start .dran .feldschild,
+body.start .zahlen-block .feldschild,
+body.start .protokoll-block .feldschild,
+body.start .k-leiste .feldschild {
+ padding: 6px 13px 6px 11px;
+ margin-left: -11px;
+ border-radius: 999px;
+ width: fit-content; max-width: 100%;
+ background: linear-gradient(90deg, rgba(6, 9, 16, .74), rgba(6, 9, 16, .32) 84%, transparent);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+/* Das Ereignisprotokoll auf der Personenseite stand als einziges ganz
+ ohne Traeger da -- IP-Adressen und Zeitstempel direkt auf dem Bild. */
+body.start #protokoll {
+ padding: 4px 14px;
+ border-radius: var(--radius-klein);
+ background: rgba(6, 9, 16, .66);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+}
+
+/* Auf dem Handy gibt es keinen Platz fuer Figuren neben dem Text --
+ dort darf die Lesespur ueber die ganze Breite gehen. Das Bild bleibt
+ oben und unten sichtbar, wo der Inhalt nicht steht. */
+@media (max-width: 760px) {
+ body.start > .schleier {
+ background:
+ linear-gradient(180deg, rgba(5, 7, 13, .88) 0%, rgba(5, 7, 13, .6) 12%,
+ rgba(5, 7, 13, .5) 55%, rgba(5, 7, 13, .72) 100%),
+ radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .06), transparent 70%),
+ radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .07), transparent 72%);
+ }
+}
diff --git a/workspace/assets/img/buehne-arena-breit.webp b/workspace/assets/img/buehne-arena-breit.webp
index 78502032..a8879d22 100644
Binary files a/workspace/assets/img/buehne-arena-breit.webp and b/workspace/assets/img/buehne-arena-breit.webp differ
diff --git a/workspace/assets/img/buehne-arena-schmal.webp b/workspace/assets/img/buehne-arena-schmal.webp
index ad7c8151..54169d0f 100644
Binary files a/workspace/assets/img/buehne-arena-schmal.webp and b/workspace/assets/img/buehne-arena-schmal.webp differ
diff --git a/workspace/assets/img/buehne-garage-breit.webp b/workspace/assets/img/buehne-garage-breit.webp
index 698c81a3..82eab4c4 100644
Binary files a/workspace/assets/img/buehne-garage-breit.webp and b/workspace/assets/img/buehne-garage-breit.webp differ
diff --git a/workspace/assets/img/buehne-garage-schmal.webp b/workspace/assets/img/buehne-garage-schmal.webp
index 70f2c2eb..89cfe11f 100644
Binary files a/workspace/assets/img/buehne-garage-schmal.webp and b/workspace/assets/img/buehne-garage-schmal.webp differ
diff --git a/workspace/assets/img/buehne-halle-breit.webp b/workspace/assets/img/buehne-halle-breit.webp
index bd36d02c..46575033 100644
Binary files a/workspace/assets/img/buehne-halle-breit.webp and b/workspace/assets/img/buehne-halle-breit.webp differ
diff --git a/workspace/assets/img/buehne-halle-schmal.webp b/workspace/assets/img/buehne-halle-schmal.webp
index d8af526a..b73c537d 100644
Binary files a/workspace/assets/img/buehne-halle-schmal.webp and b/workspace/assets/img/buehne-halle-schmal.webp differ
diff --git a/workspace/assets/img/buehne-lounge-breit.webp b/workspace/assets/img/buehne-lounge-breit.webp
index 9a2ac270..361911bf 100644
Binary files a/workspace/assets/img/buehne-lounge-breit.webp and b/workspace/assets/img/buehne-lounge-breit.webp differ
diff --git a/workspace/assets/img/buehne-lounge-schmal.webp b/workspace/assets/img/buehne-lounge-schmal.webp
index b9122e88..1c6724ab 100644
Binary files a/workspace/assets/img/buehne-lounge-schmal.webp and b/workspace/assets/img/buehne-lounge-schmal.webp differ
diff --git a/workspace/assets/img/buehne-portal-breit.webp b/workspace/assets/img/buehne-portal-breit.webp
index 042af3c3..a0270df7 100644
Binary files a/workspace/assets/img/buehne-portal-breit.webp and b/workspace/assets/img/buehne-portal-breit.webp differ
diff --git a/workspace/assets/img/buehne-portal-schmal.webp b/workspace/assets/img/buehne-portal-schmal.webp
index 02c611ea..b5e0cb04 100644
Binary files a/workspace/assets/img/buehne-portal-schmal.webp and b/workspace/assets/img/buehne-portal-schmal.webp differ
diff --git a/workspace/assets/img/buehne-showbuehne-breit.webp b/workspace/assets/img/buehne-showbuehne-breit.webp
index a080f8f9..2c6f386d 100644
Binary files a/workspace/assets/img/buehne-showbuehne-breit.webp and b/workspace/assets/img/buehne-showbuehne-breit.webp differ
diff --git a/workspace/assets/img/buehne-showbuehne-schmal.webp b/workspace/assets/img/buehne-showbuehne-schmal.webp
index e691cbdd..0cb3ce0e 100644
Binary files a/workspace/assets/img/buehne-showbuehne-schmal.webp and b/workspace/assets/img/buehne-showbuehne-schmal.webp differ
diff --git a/workspace/assets/img/buehne-skyline-breit.webp b/workspace/assets/img/buehne-skyline-breit.webp
index e3e5ca81..ba6ed0ac 100644
Binary files a/workspace/assets/img/buehne-skyline-breit.webp and b/workspace/assets/img/buehne-skyline-breit.webp differ
diff --git a/workspace/assets/img/buehne-skyline-schmal.webp b/workspace/assets/img/buehne-skyline-schmal.webp
index b266b370..dae91430 100644
Binary files a/workspace/assets/img/buehne-skyline-schmal.webp and b/workspace/assets/img/buehne-skyline-schmal.webp differ
diff --git a/workspace/assets/img/buehne-studio-breit.webp b/workspace/assets/img/buehne-studio-breit.webp
index 638ee710..22ec246a 100644
Binary files a/workspace/assets/img/buehne-studio-breit.webp and b/workspace/assets/img/buehne-studio-breit.webp differ
diff --git a/workspace/assets/img/buehne-studio-schmal.webp b/workspace/assets/img/buehne-studio-schmal.webp
index 5b3d075e..f0d1eb4f 100644
Binary files a/workspace/assets/img/buehne-studio-schmal.webp and b/workspace/assets/img/buehne-studio-schmal.webp differ
diff --git a/workspace/assets/img/buehne-wald-breit.webp b/workspace/assets/img/buehne-wald-breit.webp
index ab4c3404..db50f070 100644
Binary files a/workspace/assets/img/buehne-wald-breit.webp and b/workspace/assets/img/buehne-wald-breit.webp differ
diff --git a/workspace/assets/img/buehne-wald-schmal.webp b/workspace/assets/img/buehne-wald-schmal.webp
index 08cc91b5..f3f8d9f6 100644
Binary files a/workspace/assets/img/buehne-wald-schmal.webp and b/workspace/assets/img/buehne-wald-schmal.webp differ
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index afd61e10..bf68bb4a 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -7,9 +7,9 @@
-
-
-
+
+
+
@@ -139,9 +139,9 @@
-
-
-
-
+
+
+
+