Zum Inhalt springen
aYOUne

Wetter-Seite im Schaufenster: die rechte Spalte fuer regionale Live-Daten

Die Wetter-Seite des Schaufensters nutzt heute ein Drittel ihrer Fläche. Diese Seite hält fest, was gemessen wurde, welche drei Entwürfe zur Wahl stehen und warum einer davon empfohlen ist. Entscheidung: pm.Decisions, Aufgabe FDQ2U3P.

Der Befund ist zweigeteilt

Querformat — die rechte Hälfte ist leer. Am ausgelieferten Demo gemessen, nicht an einer Nachbildung:

Scheibe belegte Fläche leeres Band rechts
1920×1080 32,7 % der Bühne 922 px = 48 % der Scheibe
3840×2160 32,8 % der Bühne 1844 px = 48 % der Scheibe

Derselbe Anteil auf beiden Auflösungen — es ist eine Eigenschaft des Aufbaus, kein Auflösungs-Artefakt.

Hochformat — die Seite schneidet ab, und niemand hat es gemeldet. Die Temperatur „24°" läuft 400 px über ihre Kiste hinaus, ohne Auslassungspunkte, ohne Fehlermeldung: rund 40 % des Helden sind nicht auf der Scheibe. „Regen" wird zu „Reg…".

Die Ursache ist übertragbar und trifft jede Seite dieser Familie: der Held bemisst sich an der Scheiben-Höhe (--ip-hero: 25vh), steht aber in einer Spalte, deren Breite davon nichts weiß. Im Querformat fällt das nicht auf, weil dort Breite übrig ist. Es ist dieselbe Klasse wie die Spritpreis-Kopfzeile (2026-09-14) und die Gruß-Karten (2026-09-15) — zum dritten Mal.

Die rechte Spalte ist deshalb nicht nur eine Verschönerung. Sie ist der Anlass, einen stillen Defekt zu beheben.

Der Rahmen, den alle drei Entwürfe teilen

Links bleibt die Wetter-Seite unangetastet — sie ist heute richtig, nur einsam. Rechts eine Spalte im Verhältnis 58 : 42, getrennt durch eine Haarlinie, nicht durch eine Kachel. Im Hochformat wird aus der Spalte eine untere Bank.

Die drei Entwürfe

1 „Ortstafel" 2 „Silhouetten-Karte" 3 „Wechselkachel"
Form Liste benannter Orte, je eine Zahl Orte in ihrer echten Lage EIN Ort, groß, im Wechsel
Einträge quer / hoch 3 / 2 3 / Rückfall auf Tafel 1 / 1
Lesbar auf 3–10 m gut mittel sehr gut
Braucht Bewegung nein nein ja

Variante 2 fällt an ihrer eigenen Bedingung. Eine Karte braucht Fläche. Im Hochformat ist die rechte Zone eine breite, flache Bank; drei Beschriftungen kollidierten dort nach zwei Umbauten immer noch um 32–84 px. Und im Querformat löst sie ihr Versprechen nicht ein: drei Silhouetten ohne Tal, Straßen oder Rahmen lesen sich auf 640 px Spaltenbreite nicht als Karte, sondern als verstreute Liste. Die Karte gehört auf eine eigene Seite — und genau die verlangt der Seen-Brief bereits.

Variante 3 fällt am Straßenraum. Sie braucht einen Wechsel, also Bewegung, und trafficSafeMode verbietet die auf jeder Fläche am Verkehr — auf den Think-Tank-Fenstern also. Zudem stehen zwei große Zahlen (24° und 18,4°) gegeneinander: Voss 2 fällt auf Seiten-Ebene.

Variante 1 trägt drei Orte ohne Bewegung, hält die Hierarchie (24° bleibt das Größte) und funktioniert in beiden Ausrichtungen. Empfehlung.

Vorrang — die Spalte ist ein Platz, kein Inhalt

  1. Amtliche Warnung ab Stufe 2 — das Band ersetzt die Spalte ganz, in DWD-Farben, mit DWD-Wortlaut. Ab Stufe 3 darf die Warnung zusätzlich eine eigene Seite belegen.
  2. Saison — Sommer: Wassertemperaturen der Seen. Winter: Skigebiete mit offenem Betrieb.
  3. Rückfall — die Drei-Tage-Aussicht aus dem Wetter-Feed, der immer da ist.

Die Spalte ist nie leer. Das ist der Zweck des dritten Rangs: ein toter Zulieferer darf kein leeres Drittel auf einer Schaufensterscheibe hinterlassen.

Die Saison kommt nicht aus dem Kalender, sondern aus den Daten: liegt ein Schnee-Feed mit mindestens einem offenen Gebiet vor, ist Winter; sonst entscheidet das Wasser-Feed. Ein Ort ohne Seen und ohne Skigebiet bekommt den Rückfall — ohne dass jemand etwas einstellt. Orte, Entfernungen und Warngebiet kommen aus dem Standort des Displays, nie aus dem Code.

Das Warnband

Ein Band, keine Kachel: es läuft an drei Seiten bis an die Scheibe. Eine amtliche Warnung mit Rand ringsum liest sich als eines von mehreren Angeboten; das ist sie nicht. Wortlaut, Ereignis und Gültigkeit stehen unverändert so da, wie der DWD sie liefert — eine amtliche Warnung, die man umformuliert, ist keine amtliche Warnung mehr. Dasselbe gilt für ihre Farbe.

Stufe Fläche Schrift Kontrast
1 gelb #ffeb33 #2b2200 12,90:1
2 orange #fa8c00 #1f1200 7,70:1
3 rot #e4262c #ffffff 4,55:1
4 violett #c60078 #ffffff 5,72:1

Farbleiter der Orte — nachgemessen, nicht gewählt

Die Silhouette sagt „das ist Wasser"; die Zahl trägt die Ablesung und bleibt Tinte. Trotzdem ist die Fläche informationstragende Grafik und braucht 3:1. Die erste Leiter fiel durch — #38b2a4 lag bei 2,27:1. Korrigiert gegen den hellsten Punkt des Verlaufs: Wasser kalt #16455e (9,73:1), mittel #1f7893 (4,78:1), warm #16867a (4,21:1); Ski offen #2a63a5 (5,81:1), teilweise #4e6f94 (4,95:1), geschlossen #6b7688 (4,35:1).

Abnahme

Voss — bestanden. Der stärkste Punkt ist Nummer 6: die Region steht namentlich auf der Scheibe, mit Entfernung. „Tegernsee 18,4°" ist ortskundig, wo „24° Regen" allgemein bleibt. Punkt 5 (Marke in 2 s) und Punkt 7 (CTA) liegen ausdrücklich außerhalb dieser Seite — die trägt das Betreiber-Band bzw. die Werbe-Karte, und jede Information erscheint genau einmal je Scheibe.

Ehrmann — bestanden. „18,4°" statt „18°" ist die feine Einheit und sagt zugleich „gemessen, nicht geschätzt". Das Greifbare (die Orte) steht rechts, das Abstrakte (das Wetter) links. Je Zeile eine Zahl — das Presenter's Paradox ist der Grund für drei Orte statt fünf. Rot bleibt ausschließlich der Warnstufe 3 vorbehalten. Und getextet ist vom Symptom des Gasts her: „Wassertemperatur", nicht „GKD-Messstelle".

Ein Wächter, der zuerst gelogen hat

Der Geometrie-Wächter meldete „keine Beanstandung", während die Seite sichtbar kaputt war. Er fragte nur nach rechts und unten — der Held lief nach oben hinaus, und „Stand 12:22" lag über „Wassertemperatur". Beides sieht keine Rand-Messung.

Er prüft jetzt vier Dinge: über die Scheibe hinaus in alle vier Richtungen, Text breiter als seine Kiste, Inhalt höher als sein Behälter, und zwei Geschwister, deren Kästen einander schneiden. Endstand: zehn Scheiben, keine Beanstandung, kleinste Schrift über dem Hausboden von 4vh.

⚠ Im selben Skript steckte ein zweiter Messfehler: ein reiner Hash-Wechsel lädt die Seite nicht neu, die Aufnahmen für Variante 2 und 3 zeigten deshalb zweimal Variante 1. Eine Aufnahme belegt, dass etwas gerendert wurde — nicht, dass es das Gemeinte war.

Was für die Umsetzung schon da ist

Der DWD-Konnektor existiert samt Warn-Vertrag, und LocalFeedKind trägt weather-warning und water-temperature bereits (Kaskade 106). Es fehlen: der Wasser-Konnektor, die Waldbrandgefahr am Warn-Feed, und im Spieler Typ, Wächter und Spalte. Belegte Null: die beiden Feed-Arten kommen in clients/ad-display null-mal vor, während die Positiv-Kontrolle snow-report zehnmal trifft — die Suche greift also.

Belege

Messungen, Aufnahmen und beide Checklisten Punkt für Punkt: .claude/reports/schaufenster/wetter-seite-ux-2026-09-16/ (MESSUNG.md, ist-*.png, mockup-*.png).

Mit dieser Seite weiterarbeiten

Fertige Anweisungen für dein KI-Werkzeug. Kopieren, einfügen, loslegen — die KI holt sich den Inhalt selbst über die Adresse im Text.

Die Schritte für mich zusammenfassen Das Wesentliche, in der richtigen Reihenfolge.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Fasse den Inhalt für mich zusammen.

- Zuerst in zwei Sätzen: worum geht es hier?
- Dann die Schritte in der Reihenfolge, in der ich sie gehen muss.
- Je Schritt eine Zeile, in einfacher Sprache.
- Am Ende: was ich vorher bereithalten sollte.

Lass nichts weg, was ich brauche, um wirklich fertig zu werden.
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.
Erklären, wofür ich das brauche Wozu es gut ist — und wann es sich lohnt.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Erkläre mir, wofür ich das brauche.

1. Welches Problem löst es? In einem Satz, aus meiner Sicht.
2. Drei typische Situationen, in denen es mir wirklich hilft.
3. Wann ich es NICHT brauche — das spart mir Zeit.
4. Was ich stattdessen tun kann, wenn es nicht passt.

Bleib bei dem, was in der Quelle steht. Wo sie nichts hergibt, sag es offen,
statt zu raten.
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.
Bei der Einrichtung helfen Schritt für Schritt, mit Rückfragen an mich.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Begleite mich Schritt für Schritt durch die Einrichtung.

- Sag mir zuerst, was ich bereithalten muss (Zugänge, Daten, Zeit).
- Dann führe mich EINEN Schritt nach dem anderen. Warte auf mein "weiter".
- Nenne je Schritt, woran ich merke, dass er geklappt hat.
- Wenn etwas schiefgeht, frag nach der genauen Meldung, statt zu raten.

Wenn die Anleitung eine Stelle offen lässt, sag mir das, statt sie zu erfinden.
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.
Bei einem Problem weiterhelfen Ursache eingrenzen statt raten.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Hilf mir, ein Problem einzugrenzen.

- Frag mich zuerst, was ich beobachte und was ich erwartet hätte.
- Leite daraus die wahrscheinlichsten Ursachen ab, die zu dieser Quelle passen.
- Gib mir je Ursache EINEN Test, der sie bestätigt oder ausschließt.
- Sortiere so, dass der billigste Test zuerst kommt.

Rate nicht. Wenn die Quelle das Problem nicht abdeckt, sag mir, wo ich
weitersuchen sollte.
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.
In einfachen Worten erklären Ohne Fachbegriffe, von Grund auf.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Erkläre den Inhalt so, dass ihn jemand ohne Vorwissen versteht.

- Beginne mit dem Zweck: wozu gibt es das überhaupt?
- Fachbegriffe beim ersten Vorkommen in einem Halbsatz erklären.
- Ein Alltags-Vergleich, wo er wirklich trägt — keiner, wo er hinkt.
- Am Ende: die drei Dinge, die man sich merken sollte.

Kürze nicht durch Weglassen von Einschränkungen. Eine Vereinfachung, die eine
Bedingung unterschlägt, ist eine Falschaussage.
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.
Checkliste zum Abhaken Zum Mitgehen während der Umsetzung.
Lies die folgende Dokumentation von tolinax UG und arbeite damit.

Diese Seite: https://ayoune.com/de/docs/werbung/wetter-seite-im-schaufenster:-die-rechte-spalte-fuer-regionale-live-daten.md
Die vollständige Sammlung: https://ayoune.com/de/docs/werbung.md

Mache daraus eine **abhakbare Checkliste** für die praktische Umsetzung.

- Je Punkt genau eine Handlung, im Imperativ.
- Reihenfolge so, dass kein Punkt eine spätere Voraussetzung braucht.
- Voraussetzungen und Stolperstellen als eingerückte Unterpunkte.
- Am Ende eine Abnahme: woran erkenne ich, dass alles richtig ist?
Hinweis zu den Quellen:
- Jede Seite dieser Dokumentation ist als Markdown abrufbar (dieselbe Adresse mit `.md`).
- Ein maschinenlesbarer Überblick aller öffentlichen Inhalte liegt unter `/llms.txt`.
- Falls du Zugriff auf den aYOUne-MCP-Server hast, kannst du damit gegen lebende Daten
  arbeiten statt gegen diese Momentaufnahme. Falls nicht, ignoriere diesen Punkt.

War dieser Artikel hilfreich?

👎 Nein (0)
Kommentar hinterlassen