Files
dogfather-universe/workspace/unsere-seiten.html
T
DogFatherGitandClaude Opus 5 150555bc33 Der Notizblock -- und eine Pruefung, die zwoelf Kacheln nie angesehen hat
Filipe: „fuer die modis, rechte und linke hand und dogfather eine
kachel hinzufuegst, sie soll: Notizen, heissen. ich will dass du das
auch wie ein notizblock erstellst. ich will dass es uebelst geil und
einzigartig ist."

=================================================================
TEIL 1: DIE FARBE -- UND WAS DABEI AUFFIEL
=================================================================

Fuer die neue Kachel braucht es einen Ton. Beim Suchen fiel auf, dass
tools/kachelton-entzerren.mjs zwoelf der 45 Farben fuer FREI hielt.

Sie sind es nicht. bereicheFuer() gibt fuer die fuenf Rollen des
Agenturhauses null zurueck -- das heisst „nimm die Liste aus dem
Browser", und die steht in workspace/assets/js/bereiche.js. Dort
stehen die Toene 1 bis 22 und 44: Dashboard, Zahlen, Team-Lage,
Scout-Pipeline. Kacheln, die jeden Tag jemand ansieht.

pruef-kachelfarben hatte denselben blinden Fleck. Sie meldete seit
Wochen „33 benutzte Toene" und war gruen. Was sie dadurch NICHT sah:

  * Der Farblauf von gestern Nacht hat zwoelf dieser Kacheln
    verschoben und drei davon unter die Buntheitsgrenze gedrueckt.
    Gruen geblieben.
  * Ton 7, 16 und 22 lagen SEIT JEHER unter der Grenze (0,112 / 0,116
    / 0,068). Nie gemeldet.

Das ist die Sorte gruener Haken, vor der die Hausregel warnt: Er sagt
nur, dass die Bedingung erfuellt war -- nicht, dass sie das Richtige
angesehen hat.

BEHOBEN, und zwar an der Wurzel: Die REGELN (Kontrast, Buntheit)
gelten jetzt fuer jeden Ton, der irgendwo an einer Kachel steht --
gelesen aus denselben fuenf Dateien, die auch pruef-kachel-universum
liest. Dazu die Namen der Kacheln, damit „Ton 1 traegt Dashboard"
ueberhaupt pruefbar ist.

DIE PALETTE WURDE NEU GERECHNET, mit dem dritten Verfahren an einem
Tag -- die ersten zwei stehen als Fehler im Kopf des Werkzeugs:

  1. Alle 45 neu verteilt. Lief ueber zwei ausdrueckliche Wuensche
     hinweg (#ff1a1a, #a8d8ff).
  2. Nur die Kollisionen, aber immer nur EINEN der beiden bewegt.
     Ergebnis: Ton 1 sprang vom Tuerkis ins Altrosa, 0,197 weit.
  3. BEIDE duerfen sich bewegen, und zwar beide nur ein bisschen.
     Zwei Toene, die 0,02 auseinanderstehen und 0,09 brauchen, teilen
     sich das -- jeder rueckt 0,045, und beide bleiben, was sie waren.

  kleinster Abstand   0,0154  ->  0,0905
  zu blass                 4  ->  0
  sichtbar veraendert           7 Kacheln (ueber 0,05)
  kaum zu sehen                28 (13 zwischen 0,02 und 0,05, 15 darunter)

EINE AUSNAHME MIT ZAHL, keine mit Achselzucken: Ton 1 (Dashboard)
bleibt acht Tausendstel unter der Buntheitsgrenze. Gemessen ueber ALLE
16,7 Millionen sRGB-Farben ist die naechste, die alle Regeln haelt,
#7a75c8 -- ein Blauviolett, 0,113 entfernt. Tuerkis erreicht in sRGB
schlicht keine hoehere Buntheit, und das schmale Band teilen sich
schon sieben Toene. Eine Kachel, die ihre Farbfamilie behaelt, ist die
bessere Antwort auf „richtig geil und speziell" als eine, die acht
Tausendstel bunter ist und niemand wiedererkennt. blassBis sagt jetzt
bei jeder Ausnahme, WIE WEIT sie reicht -- vorher hiess blassErlaubt
schlicht „hier wird weggesehen".

DIE NEUE FARBE IST GRUEN UND WOLLTE BERNSTEIN SEIN. Gesucht war die
Farbe von Papier. Gemessen gibt es sie nicht mehr: Der beste Bernstein
im ganzen Farbraum haelt 0,0799 Abstand -- unter der Hausgrenze. Und
Platz schaffen hilft nicht: Setzt man ihn fest, muss ein warmer Ton
das Band verlassen (Ton 45 waere 0,212 weit ins Magenta gewandert).
Die groesste wirklich freie Luecke liegt im Gruen, bei 0,0917. Ein
linierter Block in Gruen ist Papier, seit es Papier gibt.

=================================================================
TEIL 2: DER BLOCK
=================================================================

DREI ENTSCHEIDUNGEN, AUS DENEN DER REST FOLGT:

1. ES GIBT KEINEN SPEICHERN-KNOPF. Nirgends. Wer einen Block
   aufschlaegt und lostippt, drueckt hinterher nicht auf „sichern";
   er klappt ihn zu. Gesichert wird 800 ms nach dem letzten
   Tastendruck. Geht das nicht, bleibt der Text im Browser liegen und
   wird nachgereicht -- und der Fuss sagt ehrlich „noch nicht
   gesichert", statt einen Verlust zu melden, den man gerade nicht
   verhindern kann.

2. DAS BLATT IST EIN SCHREIBFELD MIT EINER DECKSCHICHT. Das Feld
   traegt Text und Cursor und ist unsichtbar; darueber zeichnet eine
   zweite Schicht denselben Text noch einmal -- mit Kaestchen,
   Ueberschriften, Strichen und Links.

   DARAUS FOLGT EINE EISERNE REGEL, und sie steht dreimal im Code:
   KEINE Auszeichnung darf die BREITE eines Zeichens aendern. Kein
   Fettdruck, keine andere Groesse, keine Sperrung. Erlaubt sind nur
   Farbe, Flaeche, Rahmen und Durchstreichen. Ein einziges
   font-weight: 700 verschoebe den Umbruch, und ab der zweiten Zeile
   stuende der sichtbare Text neben dem Cursor.

   pruef-notizen misst das am echten Umbruch: eine Probe mit allen
   Auszeichnungen und einer Zeile, die umbrechen MUSS. Sind beide
   Schichten verschieden hoch, sitzt der Umbruch woanders. Mit
   Gegenprobe -- Fettdruck auf der Deckschicht bricht die Deckung um
   genau eine Zeile (30 px), und die Zeile wird rot.

3. DIE TASTATUR FUEHRT DIE LISTE FORT, NICHT EINE LEISTE. Ein
   Spiegelstrich und Enter macht den naechsten Punkt, ein leeres
   Kaestchen und Enter das naechste Kaestchen -- und ein GESETZTER
   Haken wird dabei nicht mitgenommen, die naechste Aufgabe ist ja
   noch nicht erledigt. Zweimal Enter beendet die Liste. Ein Klick
   aufs Kaestchen hakt ab. Es gibt keine Werkzeugleiste, weil man beim
   Schreiben nie den Stift wechselt.

UND: NIEMAND SIEHT DIE NOTIZEN EINES ANDEREN. Auch DogFather nicht.
Es gibt in workspace-notizen.js keinen siehtAlles()-Zweig, keinen
Umschalter, keine fremde Liste -- jede Abfrage hat person_id = ? fest
eingebaut. Die Kachel steht deshalb in „Fuer dich" und nicht in
„Taeglich": Die Gruppe sagt die wichtigste Eigenschaft, bevor man sie
anfasst.

NUR AUF DER TEAM-ADRESSE. Auf der Agenturadresse ist die Seite ein
404 -- auch fuer DogFather. Das ist dieselbe Trennung wie bei Chat,
Kalender und Aufgaben, und sie steht an zwei Stellen: in
GEHOERT_ZU_ADRESSE (die Datei) und in der Schnittstelle (die Daten).
Die Seite ist nur HTML; die Daten sind die Sache.

Dazu: sechs Papierfarben, Anheften, Suche mit Hervorhebung im Text,
Papierkorb mit dreissig Tagen und einem Eintrag in der
Aufbewahrungsliste (ohne den waere die Frist ein Satz in einem
Kommentar -- genau das ist dem Support am 24.09. passiert).

=================================================================
EIN FUND BEIM BAUEN, DER ALLEN GEHOERT
=================================================================

DELETE /workspace/api/notizen/:id gab es schon -- in
workspace-aufgaben.js, fuer die Notizen AN einer Aufgabe. Weil jener
Router frueher eingehaengt ist, hat er jeden Loeschversuch des Blocks
abgefangen und mit 404 beantwortet.

Von aussen sah das aus wie ein Fehler im neuen Modul: Anlegen ging,
Aendern ging, Loeschen nicht. Man sucht dann im eigenen Code, und dort
ist nichts. Express meldet so etwas nicht -- es nimmt die erste Route,
die passt, und schweigt ueber die zweite.

Der Block liegt jetzt unter /workspace/api/notizblock. Und
pruef-notizen geht seitdem den Routenbaum von express durch und meldet
jedes Paar aus Methode und Pfad, das zweimal vergeben ist. Gemessen:
307 Wege, keine Dublette. Die Pruefung gilt fuers ganze Haus, auch
wenn sie in dieser Datei steht -- hier ist sie gefunden worden.

Nebenbei berichtigt: pruef-crew-adresse verlangte von jedem Eintrag
der Haustafel HTTP 200 mit Inhalt. Das stimmte, solange dort nur
oeffentliche Dateien standen. notizen.html ist die erste Seite hinter
der Anmeldung -- sie antwortet mit 302, und das ist richtig. Gefragt
wird jetzt, was die Tafel wirklich meint: GIBT es das hier.

GEMESSEN, alles nach den Aenderungen:

  pruef-notizen             76 Punkte, 0 Fehler (neu)
  pruef-kachelfarben        31 Punkte, 0 Fehler (vorher 26)
  pruef-kachel-universum    13 Punkte, 0 Fehler
  pruef-crew-adresse       157 Punkte, 0 Fehler
  pruef-buehne             230 Punkte, 0 Fehler -- notizen.html neu in
                           der Liste, schlechtester Kontrast 6,73:1,
                           also 50 % ueber der Grenze
  pruef-rechtetafel, -haus-seiten, -struktur, -css-klassen,
  -jeder-hat-eine-seite, -workspace-seiten, -kachelraster,
  -rueckmeldung            alle 0 Fehler

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-26 12:42:59 +02:00

349 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Draußen · Das Rudel</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609261240" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609261240" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609261240" />
<link rel="stylesheet" href="assets/css/start.css?v=202609261240" />
<link rel="stylesheet" href="assets/css/unsere-seiten.css?v=202609261240" />
<link rel="stylesheet" href="assets/css/module.css?v=202609261240" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609261240" />
</head>
<body class="start">
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Das&nbsp;Rudel</a> · Draußen</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Das Rudel · Draußen</p>
<h1 class="titel">Draußen</h1>
<p class="unterzeile">
Ob gerade gestreamt wird, wo du Dogi sonst findest — und wo dein
Rabatt wartet.
</p>
</div>
</section>
<!-- ==================================================================
WARUM DIESE SEITE AM 21.09.2026 UMGEBAUT WURDE
Filipe: "mach was anderes aus dieser seite oder mach es viel
krass und geiler, den wir haben ja jetzt den treff chat also ist
das schon fast unnoetig ... erstell was was mich von den socken
schmeisst. es soll wirklich sogar ein wow effekt fuer die
community ergeben." Dazu die eine Auflage: die Kachel bleibt.
WAS SIE VORHER WAR: zwei Karten mit zwei Adressen. Sauber
gebaut -- und trotzdem kam niemand ein zweites Mal wieder. Wer im
Rudel ist, kennt die Website. Den Rabattcode merkt man sich beim
ersten Mal.
DIE FRAGE, DIE WIRKLICH JEMAND HAT, IST EINE ANDERE: Laeuft er
gerade? Und wenn nicht -- wie lange noch? Darauf gab es im Rudel
bisher keine Antwort, obwohl das Haus sie seit dem 20.08. kennt:
postfach.dogfather-universe.com/live-status, derselbe Dienst, von
dem der oeffentliche Streamplan lebt.
DER PULS OBEN IST DESHALB KEIN SCHMUCK. Er ist der Grund, diese
Seite zu oeffnen -- und der Grund, morgen wiederzukommen.
============================================================== -->
<!-- ==================================================================
DER PULS
DREI LAGEN, NICHT ZWEI. Ein Ampelbauteil kennt ueblicherweise
"live" und "nicht live". Das ist eine Luege, sobald der Dienst
nicht erreichbar ist: Dann steht dort "nicht live", obwohl
niemand nachgesehen hat, und jemand verpasst einen Stream, weil
eine Seite so getan hat, als wuesste sie es.
Deshalb `data-lage` mit vier Werten:
laedt -- wir fragen gerade
live -- er sendet, mit Titel und Weg hin
wartet -- er sendet nicht, mit Countdown
unklar -- wir konnten nicht nachsehen, und sagen das
In "unklar" laeuft der Countdown WEITER. Er braucht kein Netz --
die naechste 20-Uhr-Marke ergibt sich aus der Uhr des Geraets.
Eine Stoerung beim Live-Dienst nimmt der Seite also nur die eine
Auskunft, die wirklich von ihm abhaengt, nicht den Rest.
Der Ring fuellt sich ueber den ganzen Tag bis zur naechsten
Sendezeit. Er zeigt damit dasselbe wie die Zahl, aber ohne Lesen:
Ein fast voller Ring heisst "gleich".
============================================================== -->
<section class="puls" id="puls" data-lage="laedt" aria-live="polite">
<div class="puls__aura" aria-hidden="true"></div>
<div class="puls__ring-feld">
<svg class="puls__ring" viewBox="0 0 120 120" aria-hidden="true">
<circle class="puls__ring-bahn" cx="60" cy="60" r="52" />
<circle class="puls__ring-fortschritt" id="puls-bogen" cx="60" cy="60" r="52" />
</svg>
<span class="puls__punkt" aria-hidden="true"></span>
</div>
<div class="puls__text">
<p class="puls__marke" id="puls-marke">DogFather auf TikTok</p>
<p class="puls__lage" id="puls-lage">Wir sehen gerade nach …</p>
<p class="puls__zahl" id="puls-zahl">–:–:–</p>
<p class="puls__klein" id="puls-klein">Alle Zeiten in deiner Ortszeit.</p>
</div>
<!-- DER KNOPF STEHT NEBEN DEM TEXT, NICHT DARIN (21.09.2026).
Am Rechner ist die Karte ueber 1200 px breit; lag der Knopf im
Textblock, klebte er links unten und rechts blieb die halbe
Karte leer. Als eigenes Geschwister rutscht er mit
`margin-left: auto` an den rechten Rand -- dorthin, wo der
Daumen am Handy und der Blick am Rechner ohnehin hinwandern.
Am Handy bricht die Karte in eine Spalte um, und er steht
wieder unter dem Text. Dafuer sorgt derselbe Umbruch, der auch
den Ring nach oben setzt -- keine zweite Regel. -->
<a class="puls__knopf" id="puls-knopf"
href="https://www.tiktok.com/@dogfather0804"
target="_blank" rel="noopener noreferrer" hidden>Jetzt zuschauen&nbsp;→</a>
</section>
<!-- ==================================================================
DAS BESONDERE EVENT
Dieselbe Quelle wie beim oeffentlichen Streamplan
(/special-event). Traegt die Verwaltung eines ein, erscheint
dieser Kasten; sonst ist er nicht da.
ER IST VERSTECKT UND NICHT LEER: Ein Kasten mit "kein Event
geplant" belegt jeden Tag Platz, um an den meisten Tagen nichts
zu sagen -- und genau deshalb liest ihn niemand mehr an dem Tag,
an dem doch etwas drinsteht.
============================================================== -->
<section class="event" id="event" hidden>
<span class="event__zeichen" aria-hidden="true">★</span>
<div class="event__text">
<p class="event__marke">Besonderes Live-Event</p>
<h2 class="event__titel" id="event-titel"></h2>
<p class="event__zahl" id="event-zahl"></p>
</div>
<a class="event__knopf" id="event-knopf" href="#"
target="_blank" rel="noopener noreferrer" hidden>Mehr erfahren&nbsp;→</a>
</section>
<!-- ==================================================================
DIE KANAELE
Die drei Accounts kommen vom Server (/workspace/api/draussen) und
stehen hier NICHT im Quelltext. Sie haengen dort an derselben
Liste, die auch die Aufgabenverteilung benutzt.
WARUM DAS WICHTIG IST: Am 21.09.2026 stand in dieser Liste
"@hasidog00804" -- eine Null zu viel, der Account existiert
nicht. Zwei Pruefungen hatten den Tippfehler abgeschrieben und
waren deshalb gruen. Eine dritte Abschrift hier waere ein toter
Link gewesen, den niemand meldet, weil niemand weiss, dass er
falsch ist.
SOLANGE NICHTS DA IST, STEHT HIER AUCH NICHTS -- kein Geruest aus
grauen Kaesten. Geht der Abruf schief, erscheint ein Satz, der
sagt, was los ist, statt einer leeren Reihe, die aussieht, als
gaebe es keine Kanaele.
============================================================== -->
<section class="kanaele" id="kanaele" hidden>
<h2 class="kanaele__titel">Wo du ihn sonst findest</h2>
<div class="kanaele__reihe" id="kanaele-reihe"></div>
<p class="kanaele__fehler" id="kanaele-fehler" hidden>
Die Kanäle konnten gerade nicht geladen werden. Versuch es später
noch einmal — an deinem Gerät liegt es nicht.
</p>
</section>
<!-- ==================================================================
DIE ZWEI SEITEN (seit 19.09.2026, unveraendert in der Sache)
DER CODE IST ECHT UND WURDE NACHGESEHEN, nicht abgeschrieben:
Er steht in partnercodes.json von VanVans Shop als DOGI10, 10
Prozent, aktiv, ohne Ablaufdatum, mit der Notiz "Zum weitergeben
an Community, Zuschauer, Freunde etc." -- und mit
"giltAufSale": false. Genau deshalb steht der Satz zu den
reduzierten Artikeln hier drunter. Ein Rabatt, der an der Kasse
anders ausfaellt als angekuendigt, kostet mehr Vertrauen, als
er Umsatz bringt.
Der zweite Code in derselben Datei ist als "Nur fuer Filipe
persoenlich" vermerkt und steht deshalb NIRGENDWO auf dieser
Seite.
============================================================== -->
<h2 class="seiten-titel">Unsere Seiten</h2>
<div class="seiten-gitter">
<!-- ---- DOGFATHER UNIVERSE ------------------------------------ -->
<article class="aussen aussen--dogi" data-weg="https://dogfather-universe.com/">
<div class="aussen__schein" aria-hidden="true"></div>
<!-- DIE SCHWEBENDEN LOGOS (19.09.2026).
Filipe: "die sollen paar mal sein in der kacheln und so wie
schweben, sich ganz leicht bewegen."
VIER STUECK, VERSCHIEDEN GROSS UND VERSCHIEDEN SCHNELL. Alle
gleich waere ein Muster, und ein Muster sieht nach Tapete
aus. Verschieden heisst: Man nimmt Tiefe wahr, ohne dass
etwas ablenkt.
Sie tragen KEINE Farbe: Das PNG ist eine Maske, die Farbe
kommt aus dem CSS (--aussen-ton). Deshalb passt dasselbe
Logo in jede Kachel, egal welchen Ton sie hat.
`aria-hidden`, weil sie nichts sagen -- wer die Seite
vorlesen laesst, soll nicht viermal "Logo" hoeren. -->
<div class="logo-feld" aria-hidden="true">
<span class="logo-feld__stueck" data-n="1"></span>
<span class="logo-feld__stueck" data-n="2"></span>
<span class="logo-feld__stueck" data-n="3"></span>
<span class="logo-feld__stueck" data-n="4"></span>
</div>
<div class="aussen__kopf">
<span class="aussen__zeichen" aria-hidden="true">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8.4" />
<path d="M3.6 12h16.8M12 3.6c2.4 2.5 2.4 13.9 0 16.8M12 3.6c-2.4 2.5-2.4 13.9 0 16.8" />
</svg>
</span>
<div>
<p class="aussen__marke">Die Website</p>
<h3 class="aussen__titel">DogFather&nbsp;Universe</h3>
</div>
</div>
<p class="aussen__satz">
Die Heimat von DogFather als Streamer, der HasiDog-Community
und seiner Arbeit als Manager bei Spicy Media.
</p>
<!-- WAS ES DORT GIBT -- ABGELESEN, NICHT AUSGEDACHT.
Die Punkte stammen aus der Navigation von
dogfather-universe.com (streamplan.html, hasidog.html,
zeitreise.html, stimmen.html). Eine erfundene Aufzählung
wäre beim ersten Klick als Lüge aufgeflogen.
UND SIE SIND KEINE LINKS: Die ganze Karte führt zur
Startseite; einzelne Links darin würden diesen Klick
zerschneiden und wären auf dem Handy außerdem zu kleine
Ziele. -->
<ul class="aussen__liste">
<li>Der Streamplan – wann was läuft</li>
<li>HasiDog: die Community rund um Dogi</li>
<li>Die Zeitreise durch alles Bisherige</li>
<li>Stimmen von Leuten, die dabei waren</li>
</ul>
<p class="aussen__weg">
<span class="aussen__adresse">dogfather-universe.com</span>
<a class="aussen__knopf" href="https://dogfather-universe.com/"
target="_blank" rel="noopener noreferrer">Seite öffnen&nbsp;→</a>
</p>
</article>
<!-- ---- VANVANS SHOP ------------------------------------------ -->
<article class="aussen aussen--shop" data-weg="https://vans-diy-bastelbedarf.com/">
<div class="aussen__schein" aria-hidden="true"></div>
<div class="logo-feld" aria-hidden="true">
<span class="logo-feld__stueck" data-n="1"></span>
<span class="logo-feld__stueck" data-n="2"></span>
<span class="logo-feld__stueck" data-n="3"></span>
<span class="logo-feld__stueck" data-n="4"></span>
</div>
<div class="aussen__kopf">
<span class="aussen__zeichen" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M5 8h14l-1.1 11.2a1.4 1.4 0 0 1-1.4 1.3H7.5a1.4 1.4 0 0 1-1.4-1.3z" />
<path d="M9 8V6.4a3 3 0 0 1 6 0V8" />
</svg>
</span>
<div>
<p class="aussen__marke">Der Shop</p>
<!-- NAME UND BESCHREIBUNG STAMMEN VON DER SEITE SELBST
(og:site_name und meta description). Meine erste Fassung
hieß „Van's DIY Bastelbedarf" und nannte „Perlen,
Anhänger, Werkzeug" — beides ausgedacht und beides
falsch. Der Laden heißt mit „&", und er verkauft vor
allem Handgemachtes. -->
<h3 class="aussen__titel">Van's&nbsp;DIY &amp; Bastelbedarf</h3>
</div>
</div>
<p class="aussen__satz">
VanVans eigener Laden: handgemachte Häkelwerke, Plushies,
Schmuck und Bastelzubehör.
</p>
<!-- Der Rabatt. Eigener Block, weil er das Wichtigste auf
dieser Karte ist -- und kopierbar, weil niemand einen Code
abtippen soll, den er sich vorher merken muss. -->
<div class="gutschein">
<p class="gutschein__zeile">
<span class="gutschein__prozent">10&nbsp;%</span>
<span class="gutschein__wofuer">für alle aus der Community</span>
</p>
<button type="button" class="gutschein__code" id="code-knopf"
data-code="DOGI10"
aria-label="Rabattcode DOGI10 kopieren">
<span class="gutschein__wort">DOGI10</span>
<span class="gutschein__hinweis" id="code-hinweis">tippen zum Kopieren</span>
</button>
<p class="gutschein__klein">
Beim Bestellen im Feld für den Gutscheincode eintragen.
Gilt nicht auf bereits reduzierte Artikel.
</p>
</div>
<p class="aussen__weg">
<span class="aussen__adresse">vans-diy-bastelbedarf.com</span>
<a class="aussen__knopf" href="https://vans-diy-bastelbedarf.com/"
target="_blank" rel="noopener noreferrer">Shop öffnen&nbsp;→</a>
</p>
</article>
</div>
<p class="seiten-fuss">
Alles hier öffnet sich in einem neuen Fenster — das Rudel bleibt
also offen.
</p>
</main>
<script src="assets/js/nachfrage.js?v=202609261240" defer></script>
<script src="assets/js/wahl.js?v=202609261240" defer></script>
<script src="assets/js/bereiche.js?v=202609261240" defer></script>
<script src="assets/js/installieren.js?v=202609261240" defer></script>
<script src="assets/js/kopf.js?v=202609261240" defer></script>
<script src="assets/js/glocke.js?v=202609261240" defer></script>
<script src="assets/js/live.js?v=202609261240" defer></script>
<script src="assets/js/unsere-seiten.js?v=202609261240" defer></script>
</body>
</html>