Kampagnen & Events: links TikTok, rechts die Agentur -- und ein Weg nach Discord
Vier Wuensche auf einmal, alle aus demselben Bildschirm.
LINKS TIKTOK, RECHTS DIE AGENTUR
Filipe: „die sollen perfekt getrennt sein."
Woran es haengt: `kampagne_id` ist genau dann gefuellt, wenn die
Kachel aus einer TikTok-Einladung eingelesen wurde. Keine Vermutung
aus dem Titel, kein zweites Feld, das jemand pflegen muss -- es
entsteht beim Einlesen und sonst nie.
Beide Spalten stehen IMMER, auch wenn eine leer ist: Eine Trennung,
die verschwindet, sobald eine Seite nichts hat, ist keine. Nur Events
werden getrennt; Schulungen und Anliegen stehen darunter ueber die
ganze Breite. Auf dem Handy untereinander, keine gequetschte Spalte.
„AGENTUR" HEISST JETZT „KAMPAGNEN & EVENTS"
Geaendert wurde der NAME, nicht der Schluessel. An `agentur` haengen
79 Zeilen in der Datenbank, der CHECK in eintraege.bereich, die
Adresse bereich.html?b=agentur und jedes Lesezeichen.
DABEI HABE ICH EINMAL ZU VIEL UMBENANNT: Das Feld „Gilt fuer" nennt
das HAUS, nicht das Brett -- der Server bildet es aus person.haus
(„Das Rudel", „Team Dogi", „Agentur"). „Gilt fuer: Kampagnen &
Events" waere Unsinn. pruef-agentur hat es gemeldet, und die Zeile
steht wieder richtig.
TEILEN NACH DISCORD -- mit einer Seite, die so wenig zeigt wie moeglich
Discord baut seine Vorschau selbst: Es ruft die Adresse ab, liest die
Open-Graph-Angaben und zeigt Bild, Titel, Text. Es meldet sich
NIRGENDS an. Eine Seite hinter der Wand ergibt im Chat einen nackten
Link -- oder die Vorschau der Anmeldeseite.
Es braucht also eine offene Seite. Die Frage ist nicht OB, sondern
WIE WENIG. Fuenf Regeln tragen den Schutz:
1. Nichts ist offen, bis jemand es oeffnet (Vorgabe ist zu).
2. Der Schluessel wird gewuerfelt (16 Byte), nicht gezaehlt.
3. Hinaus geht nur, was auf ein Plakat gehoert: Titel, Zeitraum,
Einleitung, Banner. KEINE Aufgaben, KEINE Regeln, keine Namen,
keine Rollen, keine Nummern.
4. Zurueckziehen wirkt sofort -- gemessen: danach 404.
5. noindex im HTML UND als X-Robots-Tag im Kopf der Antwort.
Ein Eintrag aus dem Haus Team Dogi laesst sich nicht teilen (403),
und beim zweiten Druck kommt DERSELBE Link -- ein neuer wuerde den
stillschweigend ins Leere laufen lassen, den jemand schon gepostet
hat.
Vier Gegenproben gefahren, alle vier schlagen an: jeder darf teilen,
Schluessel gezaehlt statt gewuerfelt, Aufgaben gehen mit hinaus,
Zurueckziehen wirkt nicht.
DIE KACHELN UND DER EINLESE-KASTEN
Herkunftsschild an jeder Eventkachel (TikTok blau, Agentur gelb) mit
farbigem Punkt, ein ruhiger Schein im eigenen Ton, der Zustandspunkt
pulst solange das Event laeuft. Der Einlese-Kasten hat einen
TikTok-blauen Streifen, eine auslaufende Linie hinter der
Ueberschrift und ein Feld, das beim Tippen waermer wird.
VIER TOTE REGELN, GEFUNDEN STATT GESCHRIEBEN
Beim Bauen zielten vier Regeln ins Leere, und keine haette man im
Bild gesehen:
.ev-stand__punkt gibt es nicht; der Punkt haengt an
.ev-noch::before
.marke-art[data-quelle] (0,2,0) verliert gegen
.eintrag-karte[...] .marke-art (0,3,0)
-- gemessen 10px statt 22px Polster
--q-ton je Herkunft dieselbe Falle eine Ebene tiefer:
gemessen kam der Ersatzton heraus
#liste > [data-event="…"] Direktkind -- seit der Trennung haengen
die Karten eine Ebene tiefer, und alle
drei Zustaende kamen wieder in
Agenturgelb heraus
Die letzte nahm ein Feature von gestern zurueck. pruef-eventkarte hat
sie gefunden; die Selektoren sind jetzt Nachkommen- statt
Direktkind-Selektoren -- die ueberleben den naechsten Umbau.
UND MEINE EIGENE MESSUNG LOG EINMAL: „sein Farbpunkt wird wirklich
gezeichnet" prueft auf /rgb/ -- "rgba(0, 0, 0, 0)" passt darauf. Ein
gruener Haken, der nichts angesehen hat. Sie verlangt jetzt eine
Farbe, und zwar die richtige.
GEPRUEFT (18 Dateien, alle gruen)
pruef-kampagne 103 -> 123 (Teilen) · pruef-eventkarte 94 (misst jetzt
die Trennung mit) · pruef-agentur 62 · pruef-kampagne-lesen 128 ·
bild-kampagne 20 -> 53 Messungen · struktur, css-klassen,
haus-trennung 107, alle-wege, schranke, zeichen 8, deutsche-texte 12,
lesbarkeit, tippziele, video 74, workspace-seiten, buehnen-fest 13,
formulare, fingermass 5
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -3152,9 +3152,12 @@ body[data-ton] .kopf-zeile::before {
|
||||
/* Der Abstand kommt jetzt vom Raster. Zwei Abstandsquellen ergeben
|
||||
einen doppelten Abstand -- und zwar nur zwischen den Zeilen, was
|
||||
schwer zu finden ist. */
|
||||
#liste > .eintrag-karte { margin-bottom: 0; }
|
||||
#liste > .eintrag-karte,
|
||||
.kv-seite > .eintrag-karte,
|
||||
.kv-rest > .eintrag-karte { margin-bottom: 0; }
|
||||
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] {
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"],
|
||||
.kv-seite > .eintrag-karte[data-eventkarte="ja"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Die Buehne liegt am oberen Rand und soll ihn beruehren -- das
|
||||
@@ -3162,11 +3165,14 @@ body[data-ton] .kopf-zeile::before {
|
||||
Der Inhalt darunter holt es sich selbst zurueck. */
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne) {
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne),
|
||||
.kv-seite > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne) {
|
||||
padding-left: 18px; padding-right: 18px;
|
||||
}
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-block { margin-left: 0; margin-right: 0; }
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { margin-top: auto; }
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-block,
|
||||
.kv-seite > .eintrag-karte[data-eventkarte="ja"] .ev-block { margin-left: 0; margin-right: 0; }
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss,
|
||||
.kv-seite > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { margin-top: auto; }
|
||||
|
||||
/* =====================================================================
|
||||
DIE KARTE SAGT, OB DAS EVENT LAEUFT (07.10.2026)
|
||||
@@ -3190,9 +3196,21 @@ body[data-ton] .kopf-zeile::before {
|
||||
KEINE DECKKRAFT auf der ganzen Karte, obwohl das naheliegt: Das
|
||||
senkt auch den Kontrast des Textes, und „vorbei" heisst nicht
|
||||
„unlesbar". Gefaerbt wird der Rahmen, nicht der Inhalt. */
|
||||
#liste > .eintrag-karte[data-event="laeuft"] { --ev-ton: var(--ton, #cace02); }
|
||||
#liste > .eintrag-karte[data-event="kommt"] { --ev-ton: #5b8fd4; --ton: #5b8fd4; }
|
||||
#liste > .eintrag-karte[data-event="vorbei"] { --ev-ton: #6b7686; --ton: #6b7686; }
|
||||
/* OHNE `#liste >` (berichtigt 07.10.2026).
|
||||
|
||||
Diese drei Zeilen standen als DIREKTE Kinder von #liste. Seit das
|
||||
Agentur-Brett in zwei Spalten geteilt ist, haengen die Karten
|
||||
eine Ebene tiefer -- und die Regeln griffen nicht mehr. Gemessen
|
||||
kam fuer alle drei Zustaende #cace02 heraus: Ein Event, das seit
|
||||
Tagen vorbei ist, leuchtete wieder wie eines, das laeuft. Genau
|
||||
der Zustand, den der Block darueber am 07.10.2026 behoben hatte.
|
||||
|
||||
Ein Nachkommen-Selektor haelt den naechsten Umbau aus, ein
|
||||
Direktkind-Selektor nicht. `[data-event]` steht ohnehin nur an
|
||||
Eventkarten -- die Einschraenkung auf #liste war nie noetig. */
|
||||
.eintrag-karte[data-event="laeuft"] { --ev-ton: var(--ton, #cace02); }
|
||||
.eintrag-karte[data-event="kommt"] { --ev-ton: #5b8fd4; --ton: #5b8fd4; }
|
||||
.eintrag-karte[data-event="vorbei"] { --ev-ton: #6b7686; --ton: #6b7686; }
|
||||
|
||||
/* DIE FARBKANTE LIEGT IM HINTERGRUND und nicht auf einem Pseudoelement:
|
||||
::before (Kantenlicht) und ::after (Raster, Eckwinkel) gehoeren beide
|
||||
@@ -3355,3 +3373,370 @@ body[data-ton] .kopf-zeile::before {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kampagneholen__form[data-laeuft="ja"] .feld-hinweis { animation: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
LINKS TIKTOK, RECHTS DIE AGENTUR (07.10.2026)
|
||||
|
||||
Filipe: „die sollen perfekt getrennt sein."
|
||||
|
||||
DIE TRENNLINIE IST EIN HINTERGRUND, KEIN RAHMEN. `module.css` setzt
|
||||
an jeder Karte `border: 0` und belegt beide Pseudoelemente -- das ist
|
||||
hier dreimal die Stelle gewesen, an der eine Regel still
|
||||
wirkungslos war. Der senkrechte Strich liegt deshalb im Hintergrund
|
||||
des Behaelters und kann von nichts ueberschrieben werden.
|
||||
|
||||
`@container`, NICHT `@media`: Gemessen wird der Kasten, nicht das
|
||||
Fenster. Dieselbe Entscheidung wie bei der Scout-Pipeline -- wer die
|
||||
Fensterbreite misst, liegt daneben, sobald daneben etwas steht.
|
||||
===================================================================== */
|
||||
#liste { container-type: inline-size; container-name: brett; }
|
||||
|
||||
.kv-trennung {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
@container brett (min-width: 820px) {
|
||||
.kv-trennung {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0 34px;
|
||||
/* Der Strich sitzt genau in der Mitte der Luecke. */
|
||||
background:
|
||||
linear-gradient(var(--rand), var(--rand)) center / 1px 100% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.kv-seite {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Jede Seite hat ihren eigenen Ton. Links das Gruen von TikToks
|
||||
Kampagnen, rechts das Agenturgelb -- so sieht man an der Farbe,
|
||||
woher eine Kachel kommt, auch wenn man den Kopf nicht liest. */
|
||||
.kv-seite[data-seite="tiktok"] { --kv-ton: #3fbdf5; }
|
||||
.kv-seite[data-seite="agentur"] { --kv-ton: #cace02; }
|
||||
|
||||
.kv-seite__kopf {
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
padding: 0 0 10px;
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--kv-ton) 55%, transparent);
|
||||
}
|
||||
.kv-seite__titel {
|
||||
flex: 1 1 auto; min-width: 0;
|
||||
font-size: 1.02rem; font-weight: 700; letter-spacing: .02em;
|
||||
color: var(--kv-ton);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.kv-seite__unter {
|
||||
display: block; margin-top: 2px;
|
||||
font-size: .8rem; font-weight: 500; letter-spacing: 0;
|
||||
text-transform: none;
|
||||
color: var(--text-still);
|
||||
}
|
||||
/* Die Zahl NEBEN dem Wort, nicht am rechten Rand. Genau das ist am
|
||||
06.10.2026 in der Pipeline schiefgegangen: Ein fremdes
|
||||
`margin-left:auto` zog sie 560 px weg, und keine Pruefung wurde rot. */
|
||||
.kv-seite__zahl {
|
||||
flex: 0 0 auto;
|
||||
min-width: 30px; padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--kv-ton) 22%, transparent);
|
||||
color: var(--kv-ton);
|
||||
font-size: .9rem; font-weight: 700; text-align: center;
|
||||
}
|
||||
.kv-seite__leer {
|
||||
margin: 4px 0 0; padding: 18px 14px;
|
||||
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-still); font-size: .88rem; text-align: center;
|
||||
}
|
||||
|
||||
/* Was weder links noch rechts gehoert -- Schulungen, Anliegen,
|
||||
Zustaendigkeiten -- steht darunter ueber die ganze Breite. */
|
||||
.kv-rest { display: grid; gap: 12px; }
|
||||
/* EINE SPALTE, VOLLE BREITE (berichtigt 07.10.2026).
|
||||
|
||||
Hier standen zwei Spalten. Damit waren Schulungen und Anliegen
|
||||
genauso breit wie die Eventkacheln darueber -- und sahen aus wie
|
||||
eine dritte und vierte Spalte der Trennung, die sie nicht sind.
|
||||
`#liste > *:not(.eintrag-karte[data-eventkarte="ja"])` sagt
|
||||
dasselbe seit dem 07.10.2026 fuer die ungetrennten Bretter:
|
||||
Was kein Event ist, nimmt die ganze Breite. */
|
||||
|
||||
/* DER ZUSTANDSTON BLEIBT -- die Seite bekommt eine eigene Kante
|
||||
(berichtigt 07.10.2026).
|
||||
|
||||
Hier stand `--ton: var(--kv-ton)`: Damit trug jede Kachel die
|
||||
Farbe ihrer Spalte. Das nahm aber etwas weg, das am 07.10.2026
|
||||
erst gebaut und gemessen worden war -- „jeder Zustand traegt
|
||||
einen eigenen Ton" (laeuft gruen, kommt warm, vorbei stumpf).
|
||||
pruef-eventkarte wurde rot und hatte recht: Alle drei Zustaende
|
||||
kamen in Agenturgelb heraus.
|
||||
|
||||
WELCHE AUSKUNFT IST WICHTIGER? Der Zustand. Ob etwas LAEUFT oder
|
||||
VORBEI ist, entscheidet, ob man heute etwas tut; woher es kommt,
|
||||
steht ohnehin doppelt da -- in der Spaltenueberschrift und auf
|
||||
dem Herkunftsschild der Kachel.
|
||||
|
||||
Die Seite bekommt deshalb eine eigene, schmale Kante links. Sie
|
||||
benutzt `--kv-ton` direkt und fasst `--ton` nicht an -- zwei
|
||||
Auskuenfte, zwei Kanaele, keine ueberschreibt die andere. */
|
||||
.kv-seite .eintrag-karte[data-eventkarte="ja"] {
|
||||
background:
|
||||
linear-gradient(var(--kv-ton), color-mix(in srgb, var(--kv-ton) 20%, transparent))
|
||||
left / 3px 100% no-repeat,
|
||||
radial-gradient(120% 60% at 50% -10%,
|
||||
color-mix(in srgb, var(--ton) 16%, transparent) 0, transparent 70%),
|
||||
var(--flaeche);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DIE EVENT-KACHELN, VIEL KRÄFTIGER (07.10.2026)
|
||||
|
||||
Filipe: „ich will dass die kacheln von den kampagnen viel viel viel
|
||||
krasser und geiler aussehen."
|
||||
|
||||
WAS HIER NICHT GEHT, UND WARUM: Rahmen (`border`) und beide
|
||||
Pseudoelemente gehören `module.css`. Drei Regeln in diesem Haus
|
||||
waren schon deshalb still wirkungslos. Alles unten arbeitet
|
||||
deshalb mit Hintergründen, Schatten und `--ton` — also mit dem, was
|
||||
der Baukasten selbst benutzt und weiterreicht.
|
||||
===================================================================== */
|
||||
|
||||
/* ---- Die Trennlinie: zwei Töne, die sich in der Mitte treffen ----- */
|
||||
@container brett (min-width: 820px) {
|
||||
.kv-trennung {
|
||||
/* KRAEFTIGER ALS BEIM ERSTEN ANLAUF (gemessen 07.10.2026): Mit
|
||||
55 % Deckung auf 2 px war die Linie im Bildschirmfoto nicht zu
|
||||
finden. Sie ist jetzt 3 px breit, laeuft voll deckend durch die
|
||||
Mitte und hat einen weichen Schein daneben -- augenschonend,
|
||||
aber vorhanden. Oben und unten blendet sie aus, damit sie
|
||||
nicht wie ein Rahmen aussieht. */
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
#3fbdf5 6%,
|
||||
color-mix(in srgb, #3fbdf5 50%, #cace02) 50%,
|
||||
#cace02 94%,
|
||||
transparent 100%)
|
||||
center / 3px 100% no-repeat,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
color-mix(in srgb, #3fbdf5 22%, transparent) 20%,
|
||||
color-mix(in srgb, #cace02 22%, transparent) 80%,
|
||||
transparent 100%)
|
||||
center / 15px 100% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Das Herkunftsschild -----------------------------------------
|
||||
|
||||
ZWEI DINGE, DIE BEIM ERSTEN ANLAUF FALSCH WAREN (gemessen):
|
||||
|
||||
1. SPEZIFITAET. Hier stand `.marke-art[data-quelle]` (0,2,0). Die
|
||||
Eventkarte setzt aber weiter oben
|
||||
`.eintrag-karte[data-eventkarte="ja"] .marke-art` (0,3,0) --
|
||||
mein `padding-left` kam nie an, gemessen 10px statt 22px, und
|
||||
der Punkt lag auf dem ersten Buchstaben. Deshalb jetzt mit
|
||||
derselben Kartenbedingung davor.
|
||||
|
||||
2. ABSOLUT STATT FLEX. Ein Punkt, der ueber `position: absolute`
|
||||
neben dem Text liegt, haengt an einem Polster, das jemand
|
||||
anders setzt. `.ev-noch` im selben Haus macht es seit jeher
|
||||
richtig: inline-flex mit `gap` -- dann ruecken Punkt und Wort
|
||||
gemeinsam, egal wer am Polster dreht. Dasselbe Muster, nicht
|
||||
ein zweites.
|
||||
------------------------------------------------------------------ */
|
||||
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle],
|
||||
.marke-art[data-quelle] {
|
||||
--q-ton: #8a9a5b;
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 2px 12px;
|
||||
letter-spacing: .14em;
|
||||
color: color-mix(in srgb, var(--q-ton) 78%, #ffffff);
|
||||
background: color-mix(in srgb, var(--q-ton) 18%, rgba(8, 11, 18, .72));
|
||||
border: 1px solid color-mix(in srgb, var(--q-ton) 48%, transparent);
|
||||
}
|
||||
/* DIE TOENE MIT DERSELBEN KARTENBEDINGUNG DAVOR (berichtigt
|
||||
07.10.2026). Ohne sie gewinnt die Grundregel darueber -- sie traegt
|
||||
die Kartenbedingung und ist damit spezifischer. Gemessen kam der
|
||||
Ersatzton #8a9a5b heraus statt des TikTok-Blaus. Dieselbe Falle wie
|
||||
eine Zeile hoeher, nur eine Ebene tiefer: Wer eine Variable in einer
|
||||
spezifischeren Regel setzt, muss sie auch dort ueberschreiben. */
|
||||
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle="tiktok"],
|
||||
.marke-art[data-quelle="tiktok"] { --q-ton: #3fbdf5; }
|
||||
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle="agentur"],
|
||||
.marke-art[data-quelle="agentur"] { --q-ton: #cace02; }
|
||||
/* Der Punkt davor ist kein Schmuck: Er traegt die Farbe auch dann,
|
||||
wenn die Schrift klein und das Schild schmal ist. */
|
||||
.marke-art[data-quelle]::before {
|
||||
content: ""; flex: none;
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--q-ton);
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--q-ton) 70%, transparent);
|
||||
}
|
||||
/* ---- Die Kachel selbst: mehr Tiefe, ohne zu blenden --------------- */
|
||||
.kv-seite .eintrag-karte[data-eventkarte="ja"],
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] {
|
||||
/* Ein ruhiger Schein aus dem eigenen Ton, von oben nach unten
|
||||
auslaufend. Kein Leuchten, kein Flackern -- augenschonend heißt
|
||||
hier: man sieht die Farbe, ohne hinzusehen. */
|
||||
background:
|
||||
radial-gradient(120% 60% at 50% -10%,
|
||||
color-mix(in srgb, var(--ton) 16%, transparent) 0,
|
||||
transparent 70%),
|
||||
var(--flaeche);
|
||||
transition: transform .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.kv-seite .eintrag-karte[data-eventkarte="ja"]:hover,
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"]:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Die Bühne bekommt oben eine Lichtkante im Ton der Seite -- sie
|
||||
ersetzt den Rahmen, den `module.css` auf 0 setzt. */
|
||||
.eintrag-karte[data-eventkarte="ja"] .ev-buehne {
|
||||
box-shadow:
|
||||
inset 0 2px 0 0 color-mix(in srgb, var(--ton) 70%, transparent),
|
||||
inset 0 -1px 0 0 color-mix(in srgb, var(--rand) 70%, transparent);
|
||||
}
|
||||
|
||||
/* Der Zustandspunkt pulst ruhig, solange das Event LÄUFT -- und nur
|
||||
dann. Ein Punkt, der immer pulst, ist kein Hinweis mehr.
|
||||
|
||||
DER PUNKT HEISST `.ev-noch::before` (berichtigt 07.10.2026). Hier
|
||||
stand zuerst `.ev-stand__punkt` -- eine Klasse, die es in diesem
|
||||
Haus gar nicht gibt. Die Regel war damit still wirkungslos, genau
|
||||
wie die drei, vor denen `module.css` warnt. Abgeschrieben aus
|
||||
bereich.js statt geraten. */
|
||||
.ev-noch[data-stand="laeuft"]::before {
|
||||
animation: ev-puls 2.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ev-puls {
|
||||
0%, 100% { opacity: .55; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.25); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ev-noch[data-stand="laeuft"]::before { animation: none; }
|
||||
.kv-seite .eintrag-karte[data-eventkarte="ja"],
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"] { transition: none; }
|
||||
.kv-seite .eintrag-karte[data-eventkarte="ja"]:hover,
|
||||
#liste > .eintrag-karte[data-eventkarte="ja"]:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* Der Teilen-Knopf hebt sich ab -- er tut etwas, das nach draußen
|
||||
wirkt, und das soll man sehen, bevor man drückt. Kein Rot: Teilen
|
||||
ist nichts Gefährliches, nur etwas Endgültigeres als ein Haken. */
|
||||
.schritt--teilen {
|
||||
--t-ton: #7fd2fb;
|
||||
color: var(--t-ton);
|
||||
border-color: color-mix(in srgb, var(--t-ton) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--t-ton) 12%, transparent);
|
||||
font-weight: 650;
|
||||
}
|
||||
.schritt--teilen:hover {
|
||||
background: color-mix(in srgb, var(--t-ton) 20%, transparent);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DER KASTEN „KAMPAGNE AUS EINER EINLADUNG" — SPEZIELLER (07.10.2026)
|
||||
|
||||
Filipe, zu einem Bildschirmfoto davon: „soll auch spezieller
|
||||
aussehen bitte."
|
||||
|
||||
Er sah bis eben aus wie jeder andere Kasten im Haus: Rahmen, Fläche,
|
||||
fertig. Er ist aber keiner von vielen — er ist der einzige Ort, an
|
||||
dem etwas von AUSSEN hereinkommt. Das soll man sehen, bevor man
|
||||
etwas einfügt.
|
||||
|
||||
WAS IHN UNTERSCHEIDET, UND WARUM GENAU DAS:
|
||||
|
||||
1. EIN TIKTOK-BLAUER STREIFEN LINKS. Dieselbe Farbe wie die linke
|
||||
Spalte der Trennung darunter — wer hier einfügt, sieht sofort,
|
||||
wo das Ergebnis landet. Als Hintergrund, nicht als `border`:
|
||||
Rahmen gehören `module.css`, und drei Regeln in diesem Haus waren
|
||||
schon deshalb still wirkungslos.
|
||||
|
||||
2. EIN SCHEIN VON OBEN LINKS, dort wo der Streifen anfängt. Er zieht
|
||||
den Blick zum Feld, nicht zum Knopf.
|
||||
|
||||
3. DIE ÜBERSCHRIFT TRÄGT EINE LINIE, die nach rechts ausläuft. Sie
|
||||
trennt „was ist das" von „was tue ich hier" — ohne einen zweiten
|
||||
Kasten im Kasten.
|
||||
|
||||
4. DAS FELD WIRD BEIM TIPPEN WÄRMER. Kein Blinken, kein Rahmen in
|
||||
Signalfarbe: nur ein etwas hellerer Grund und ein Schein in
|
||||
derselben Farbe. Augenschonend heißt hier, dass man es bemerkt,
|
||||
ohne hinzusehen.
|
||||
===================================================================== */
|
||||
.kampagneholen {
|
||||
--kh-ton: #3fbdf5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-left: 24px;
|
||||
background:
|
||||
/* der Streifen */
|
||||
linear-gradient(var(--kh-ton), color-mix(in srgb, var(--kh-ton) 25%, transparent))
|
||||
left / 4px 100% no-repeat,
|
||||
/* der Schein darüber */
|
||||
radial-gradient(90% 70% at 0% 0%,
|
||||
color-mix(in srgb, var(--kh-ton) 13%, transparent) 0, transparent 68%),
|
||||
var(--flaeche);
|
||||
}
|
||||
|
||||
.kampagneholen__titel {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
color: #e8f1fa;
|
||||
}
|
||||
/* Die Linie hinter der Überschrift läuft aus, statt zu enden -- eine
|
||||
Linie, die hart aufhört, sieht aus wie ein abgeschnittener Rahmen. */
|
||||
.kampagneholen__titel::after {
|
||||
content: ""; flex: 1 1 auto; height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
color-mix(in srgb, var(--kh-ton) 55%, transparent),
|
||||
transparent);
|
||||
}
|
||||
|
||||
.kampagneholen textarea {
|
||||
background: color-mix(in srgb, var(--kh-ton) 5%, rgba(8, 11, 18, .55));
|
||||
border: 1px solid color-mix(in srgb, var(--kh-ton) 28%, transparent);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
color: inherit;
|
||||
transition: background-color .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.kampagneholen textarea::placeholder { color: #7f95ad; }
|
||||
.kampagneholen textarea:focus {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--kh-ton) 10%, rgba(8, 11, 18, .55));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-ton) 22%, transparent);
|
||||
border-color: color-mix(in srgb, var(--kh-ton) 55%, transparent);
|
||||
}
|
||||
|
||||
/* Der Knopf trägt dieselbe Farbe wie der Streifen -- er ist das Ende
|
||||
desselben Gedankens, nicht ein fremdes Element am Rand. */
|
||||
.kampagneholen #kampagne-holen {
|
||||
color: #06121a;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--kh-ton) 92%, #ffffff),
|
||||
var(--kh-ton));
|
||||
border: 1px solid color-mix(in srgb, var(--kh-ton) 70%, #000000);
|
||||
font-weight: 700;
|
||||
}
|
||||
.kampagneholen #kampagne-holen:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
.kampagneholen #kampagne-holen:disabled { filter: saturate(.4); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kampagneholen textarea { transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user