Agentur-Events: die Karte als Aushang, Aufgaben zum Abhaken
Filipe, mit einem Bildschirmfoto des Oktober-Events: "ich will das viel geiler viel perfekter. und auch wenn man die eintraegt und so soll viel mehr perfektioniert und uebersichtlicher sein." VORHER GEMESSEN (1280 px, eine einzige Eventkarte): Kartenhoehe 1196 px -- das Fenster ist 900 px davon Banner 638 px -- 53 %, ohne einen Buchstaben Titel steht bei 1482 px -- zweimal scrollen bis zum Namen Titelgroesse 15,36 px -- 1,4 px mehr als der Fliesstext Etikett 10,88 px -- unter der eigenen Grenze (11,5) Datum 3 x -- in drei Zeilen untereinander Knoepfe 4 x gleich -- "loeschen" wie "zur Aufgabe" NACHHER, dieselbe Messung: Karte 618 px, Buehne 203 px, Titel 75 px unter der Kartenkante und 24,8 px gross, Etikett 12 px, das Datum einmal, "loeschen" abgesetzt. DIE KARTE Das Banner ist nicht mehr ein Anhang ueber dem Titel, sondern die Buehne dahinter -- Hoehe gedeckelt, Titel darauf. Dazu die Frage, die bei einem Wettbewerb wirklich zaehlt und bisher nirgends beantwortet wurde: "noch 12 Tage", mit Zeitbalken. Ein Knopf "Banner ganz" holt das vollstaendige Bild zurueck, das beim Umbau sonst verloren gegangen waere -- bei Filipes Banner steht die Ansage IM Bild. DIE AUFGABEN Aus Fliesstext wird eine Liste, und jeder hakt fuer sich ab (neue Tabelle event_punkte, Schluessel aus dem Zeilentext). Umsortieren laesst den Haken, wo er ist; wird die Bedingung selbst umgeschrieben, faellt er -- beides nachgemessen. Die Leitung sieht, wer wie weit ist, eine Creatorin sieht diese Liste gar nicht erst. DAS FORMULAR Ein Feld je Zeile statt eines leeren Textfeldes. Im echten Event stand ".Jeden Tag Live gehen" neben ". 33k Diamanten erreichen" -- einmal mit Leerzeichen, einmal ohne. Das ist die zwangslaeufige Folge davon, dass die Aufzaehlungszeichen von Hand getippt werden; jetzt setzt sie das Formular. Dazu "Laeuft 14 Tage.", eine Warnung bei verdrehtem Zeitraum und eine Vorschau, die dieselbe Funktion benutzt wie die echte Karte. NEBENBEI GEFUNDEN UND BEHOBEN * Das Banner kam bei Creatorn mit 404 zurueck -- also an genau der Karte, die fuer sie gemacht ist. Die Regel "wer das Brett sieht, sieht das Bild" galt nur fuer die sieben Community-Bretter. Jetzt fragt der Bildweg dieselbe Regel wie das Brett (darfEintragSehen); die Gegenprobe zeigt, dass ein fremder Eintrag weiterhin 404 gibt. * Zwei Stellen setzten das Formular zurueck, die kuerzere liess Vorschau und Zeilen-Editor stehen -- beim naechsten "Neuer Eintrag" standen die Aufgaben des vorigen Events noch da. * Der Schriftgrund ragte auf dem Handy 6 px ueber die Karte (feste -20 px gegen 14 px Polsterung); jetzt an die Polsterung gekoppelt. GEPRUEFT pruef-eventkarte.mjs (neu): 77 Pruefungen, 0 Fehler -- mit Gegenproben zu jeder Zusage und einer Kontrastmessung am Bildpunkt auf einem weissen Banner (14,7:1; ohne den Schriftgrund 1,05:1). pruef-agentur.mjs auf die neuen Bausteine nachgezogen, Zahl unveraendert bei 62. pruef-eintrag-bild.mjs 24/0. OFFEN, NICHT AUS DIESEM UMBAU: Das Brett `agentur` ist auf der Crew-Adresse erreichbar. Zweimal gemessen, mit und ohne diese Aenderung -- gleiches Ergebnis. Gehoert zur Trennungsregel vom 24.09.2026 und wird getrennt entschieden. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -543,85 +543,28 @@
|
||||
Zustand zusaetzlich als WORT da ("läuft bis 30.09.2026").
|
||||
===================================================================== */
|
||||
|
||||
.event-zeitraum {
|
||||
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
||||
margin: 2px 0 10px;
|
||||
font-size: .82rem;
|
||||
}
|
||||
.event-zeitraum__marke {
|
||||
--f: var(--k-neutral);
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid color-mix(in srgb, var(--f) 34%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--f) 12%, transparent);
|
||||
color: color-mix(in srgb, var(--f) 82%, #fff);
|
||||
font-weight: 600; letter-spacing: .01em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Der Punkt davor ist reine Zierde und darf deshalb NICHT vorgelesen
|
||||
werden -- ein Screenreader saehe sonst ein Aufzaehlungszeichen mitten
|
||||
im Satz. */
|
||||
.event-zeitraum__marke::before {
|
||||
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--f); flex: none;
|
||||
}
|
||||
.event-zeitraum[data-stand="laeuft"] .event-zeitraum__marke { --f: var(--k-gut); }
|
||||
.event-zeitraum[data-stand="kommt"] .event-zeitraum__marke { --f: var(--k-mittel); }
|
||||
.event-zeitraum[data-stand="vorbei"] .event-zeitraum__marke { --f: var(--k-neutral); }
|
||||
.event-zeitraum__spanne {
|
||||
color: var(--text-leise);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE ALTEN BAUSTEINE SIND AM 03.10.2026 WEGGEFALLEN.
|
||||
|
||||
/* Ein vorbeigelaufenes Event bleibt lesbar, tritt aber zurueck. Kein
|
||||
display:none -- was gelaufen ist, will man nachschlagen koennen.
|
||||
Gedaempft wird nur die Flaeche, nicht die Schrift: Text unter 4.5:1
|
||||
waere nicht mehr lesbar, und "alt" ist kein Grund, jemanden
|
||||
auszuschliessen. */
|
||||
.eintrag-karte[data-event="vorbei"] { opacity: .82; }
|
||||
Hier standen `.event-zeitraum*` und `.event-block*` -- die
|
||||
Zeitraumzeile ueber der Karte und die zwei gleich aussehenden
|
||||
grauen Kaesten fuer Aufgaben und Regeln. Beide erzeugt bereich.js
|
||||
nicht mehr: Der Zeitraum steht jetzt auf der Buehne (einmal statt
|
||||
dreimal), und aus den Kaesten sind Listen geworden, die man abhaken
|
||||
kann. Die neuen Regeln stehen weiter unten unter "AGENTUR-EVENTS:
|
||||
DIE KARTE ALS AUSHANG".
|
||||
|
||||
.event-block {
|
||||
margin: 10px 0 0;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .022);
|
||||
}
|
||||
.event-block__schild {
|
||||
margin: 0 0 4px;
|
||||
/* .74rem = 11.84 px, nicht .7rem. Die Schriftgroessen-Pruefung zieht
|
||||
die Grenze bei 11.5 px, und sie hat recht: In Grossbuchstaben mit
|
||||
Sperrung wirkt eine Schrift kleiner, als die Zahl sagt -- und das
|
||||
hier ist die Beschriftung, an der man die Regeln vom Aufgabenteil
|
||||
unterscheidet. */
|
||||
font-size: .74rem; font-weight: 700;
|
||||
letter-spacing: .09em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.event-block__text {
|
||||
margin: 0;
|
||||
font-size: .87rem; line-height: 1.6; color: var(--text);
|
||||
/* pre-line, nicht pre-wrap: Zeilenumbrueche bleiben (die Aufzaehlung
|
||||
ist der Sinn dieser Felder), aber eine versehentlich eingefuegte
|
||||
Einrueckung aus einer Chatnachricht reisst die Karte nicht auf. */
|
||||
white-space: pre-line;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
SIE WURDEN ENTFERNT UND NICHT AUFGEHOBEN: Eine Regel, die auf nichts
|
||||
mehr zeigt, sieht beim naechsten Lesen aus wie eine, die etwas tut
|
||||
-- und man sucht den Fehler dann an einer Stelle, an der nichts
|
||||
passiert. Was sie aussagten, steht in der Begruendung der neuen
|
||||
Regeln; die Geschichte selbst steht in git.
|
||||
|
||||
/* .feld-hinweis steht seit dem 07.09.2026 in aufgaben.css -- bei den
|
||||
uebrigen Formularstilen. Grund: Die Dashboard-Seite braucht ihn jetzt
|
||||
auch (Creator anlegen), laedt aber diese Datei hier nicht. Ein
|
||||
Formularbaustein, der in der Bereichsdatei liegt, ist nur so lange
|
||||
richtig, wie ihn keine zweite Seite braucht. */
|
||||
|
||||
@media (max-width: 560px) {
|
||||
/* Auf dem Handy untereinander: Marke und Spanne nebeneinander
|
||||
ergaeben bei "vorbei seit 30.09.2026" einen Umbruch mitten im
|
||||
Datum. */
|
||||
.event-zeitraum { gap: 6px; }
|
||||
.event-zeitraum__spanne { flex-basis: 100%; }
|
||||
}
|
||||
Ebenfalls weg: `.eintrag-karte[data-event="vorbei"] { opacity: .82 }`.
|
||||
Ein abgelaufenes Event war damit kaum von einem laufenden zu
|
||||
unterscheiden, und der Text wurde schlechter lesbar, ohne dass es
|
||||
etwas brachte. Jetzt tritt nur das BILD zurueck.
|
||||
--------------------------------------------------------------------- */
|
||||
|
||||
/* =====================================================================
|
||||
RÜCKMELDUNG: „fürs Team" oder „nur an DogFather" (10.09.2026)
|
||||
@@ -2195,3 +2138,880 @@ body[data-ton] .kopf-zeile::before {
|
||||
display: grid; gap: 10px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
AGENTUR-EVENTS: DIE KARTE ALS AUSHANG (03.10.2026)
|
||||
|
||||
Filipe, mit einem Bildschirmfoto des Oktober-Events: "ich will das
|
||||
viel geiler viel perfekter. und auch wenn man die eintraegt und so
|
||||
soll viel mehr perfektioniert und uebersichtlicher sein. mach was
|
||||
hoch profissionelles bitte."
|
||||
|
||||
WAS VORHER GEMESSEN WURDE (1280 px, eine einzige Karte):
|
||||
|
||||
Kartenhoehe 1196 px -- Fenster ist 900 px
|
||||
davon Banner 638 px -- 53 %, ohne einen Buchstaben
|
||||
Titel steht bei 1482 px -- zweimal scrollen bis zum Namen
|
||||
Titelgroesse 15,36 px -- 1,4 px mehr als der Fliesstext
|
||||
Etikett 10,88 px -- unter der eigenen Grenze (11,5)
|
||||
Datum 3 x -- in drei Zeilen untereinander
|
||||
Knoepfe 4 x gleich -- "loeschen" wie "zur Aufgabe"
|
||||
|
||||
WAS SICH DARAUS ERGIBT: Das Bild bleibt gross, traegt aber den Titel.
|
||||
Der Zeitraum steht einmal, mit der Antwort davor ("noch 13 Tage").
|
||||
Aufgaben werden zu einer Liste, die man abhaken kann. Und "loeschen"
|
||||
sieht nicht mehr aus wie "zur Aufgabe".
|
||||
|
||||
AUGENSCHONEND BLEIBT ES: keine neuen Signalfarben, kein Leuchten,
|
||||
kein Blinken. Die Toene kommen aus der vorhandenen Palette
|
||||
(--k-gut / --k-mittel / --k-neutral / --akzent), die Bewegung ist
|
||||
dieselbe wie ueberall (--tempo) und faellt bei
|
||||
prefers-reduced-motion ganz weg.
|
||||
===================================================================== */
|
||||
|
||||
/* Eine Eventkarte traegt ihre eigene Polsterung: Die Buehne geht bis an
|
||||
den Rand, der Rest nicht. Deshalb hier null -- die Abstaende setzen
|
||||
die Teile selbst. */
|
||||
.eintrag-karte[data-eventkarte="ja"] {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* Der farbige Streifen links kam von der Dringlichkeit und sagte bei
|
||||
einem Event nichts: Jedes Event stand auf "mittel", also hatte
|
||||
jedes denselben blauen Strich. Den Zustand traegt jetzt die Buehne,
|
||||
und zwar in der Farbe, die ihn bedeutet. */
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE BUEHNE
|
||||
--------------------------------------------------------------------- */
|
||||
.ev-buehne {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
/* DIE HOEHE IST GEDECKELT, UND ZWAR ZWEIFACH.
|
||||
|
||||
aspect-ratio haelt die Form bei schmalen Karten (sonst waere die
|
||||
Buehne auf dem Handy ein Briefschlitz), max-height faengt die
|
||||
breiten ab: Bei 1230 px Kartenbreite waeren 2.6/1 immer noch
|
||||
473 px -- mehr als ein Drittel eines Laptopbildschirms fuer ein
|
||||
Bild, auf dem der Titel steht.
|
||||
|
||||
Gemessen: 638 px vorher, 300 px jetzt. */
|
||||
/* `width: 100%` IST PFLICHT, NICHT ZIERDE (gemessen 03.10.2026).
|
||||
|
||||
Ohne sie schrumpft `aspect-ratio` zusammen mit `max-height` auch
|
||||
die BREITE: In der ersten Fassung war die Buehne 780 px breit in
|
||||
einer 1230 px breiten Karte -- das Banner stand als Kachel links,
|
||||
rechts daneben lag ein Drittel Leere. Das sah aus wie ein
|
||||
Ladefehler und war eine Rechenregel: 300 px Hoehe x 2.6 = 780 px.
|
||||
|
||||
Mit fester Breite berechnet aspect-ratio nur noch die Hoehe
|
||||
(1230 / 2.6 = 473 px), und max-height deckelt sie auf 300. */
|
||||
width: 100%;
|
||||
aspect-ratio: 2.6 / 1;
|
||||
min-height: 170px;
|
||||
max-height: 300px;
|
||||
/* DIE SEITLICHE POLSTERUNG HAT EINEN NAMEN, weil der Schriftgrund
|
||||
darunter sie braucht: Er muss genau bis an den Rand der Buehne
|
||||
reichen und keinen Schritt weiter. Mit einer zweiten festen Zahl
|
||||
ging das schief -- auf dem Handy betraegt die Polsterung 14 px,
|
||||
der Grund rechnete aber weiter mit 20, und die Karte war 6 px
|
||||
breiter als ihr Fenster (gemessen 03.10.2026, scrollWidth gegen
|
||||
clientWidth).
|
||||
Gefunden hat das die Pruefung, nicht das Auge: `overflow: hidden`
|
||||
an der Karte hat den Ueberhang unsichtbar gemacht. Und mein erster
|
||||
Suchlauf nach dem Verursacher kam leer zurueck -- ein ::before ist
|
||||
kein Element, `querySelectorAll("*")` findet es nicht. */
|
||||
--ev-rand: 20px;
|
||||
padding: 44px var(--ev-rand) 16px;
|
||||
background:
|
||||
radial-gradient(120% 140% at 18% 0%,
|
||||
color-mix(in srgb, var(--violett, #8a76ff) 26%, transparent), transparent 62%),
|
||||
linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--akzent, #3fbdf5) 16%, transparent),
|
||||
rgba(255, 255, 255, .02));
|
||||
}
|
||||
|
||||
/* OHNE BILD WIRD DIE BUEHNE FLACHER. Ein Farbverlauf braucht keine
|
||||
300 px, um zu wirken -- und eine halbleere Flaeche ueber drei Zeilen
|
||||
Text sieht aus, als fehle etwas. */
|
||||
.ev-buehne:not([data-mitbild="ja"]) {
|
||||
aspect-ratio: auto;
|
||||
min-height: 0;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.ev-buehne__bild {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
/* NICHT MITTIG, SONDERN ETWAS HOEHER: Auf einem Event-Banner steht
|
||||
die Aussage meistens im oberen Drittel ("Schaffst du es, ab HEUTE
|
||||
bis zum 16.10.2026"), waehrend unten die Preise stehen. Wird
|
||||
beschnitten, soll die Aussage uebrig bleiben. */
|
||||
object-position: center 38%;
|
||||
}
|
||||
|
||||
/* DER SCHLEIER MACHT DIE SCHRIFT LESBAR, UND ZWAR IMMER.
|
||||
|
||||
Welches Bild jemand spaeter hochlaedt, weiss heute niemand -- ein
|
||||
helles Banner ergaebe ohne ihn helle Schrift auf Hell. Deshalb kein
|
||||
"nur bei hellen Bildern": Der Verlauf liegt grundsaetzlich darunter.
|
||||
|
||||
Nach oben laeuft er aus, damit das Bild oben unberuehrt bleibt; das
|
||||
ist die Haelfte, die man sehen will. */
|
||||
.ev-buehne__schleier {
|
||||
position: absolute; inset: 0;
|
||||
/* DIE KURVE IST NACHGEMESSEN, NICHT GESCHAETZT (03.10.2026).
|
||||
|
||||
Die erste Fassung lief schon bei 26 % der Hoehe auf .82 Deckung --
|
||||
damit war von einem Banner praktisch nichts mehr uebrig, und genau
|
||||
das Bild, das Filipe hochlaedt, war weg. Jetzt ist der Schleier
|
||||
dort stark, wo die Schrift steht (unterste 30 %), und laeuft
|
||||
darueber schnell aus: Ab der Haelfte sieht man das Banner fast
|
||||
unberuehrt.
|
||||
|
||||
DIE UNTERSTE STUFE BLEIBT KRAEFTIG. Sie ist es, die den Titel auch
|
||||
auf einem weissen Banner lesbar haelt -- und was jemand spaeter
|
||||
hochlaedt, weiss heute niemand. Nachgemessen wird das Ergebnis am
|
||||
Bildpunkt (siehe pruef-eventkarte.mjs), nicht an dieser Zahl. */
|
||||
background: linear-gradient(to top,
|
||||
rgba(5, 8, 14, .92) 0%,
|
||||
rgba(5, 8, 14, .78) 18%,
|
||||
rgba(5, 8, 14, .46) 34%,
|
||||
rgba(5, 8, 14, .16) 52%,
|
||||
rgba(5, 8, 14, .02) 74%,
|
||||
transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Ohne Bild gibt es nichts abzudunkeln -- der Verlauf wuerde dann nur
|
||||
den eigenen Farbverlauf zumatschen. */
|
||||
.ev-buehne:not([data-mitbild="ja"]) .ev-buehne__schleier { display: none; }
|
||||
|
||||
/* ==== DIE SCHRIFT BRAUCHT IHREN EIGENEN GRUND (03.10.2026) ==========
|
||||
|
||||
NACHGEMESSEN, UND ZWAR AM HAERTEFALL: Mit einem fast weissen Banner
|
||||
(250,248,252) stand "November Challenge" in heller Schrift auf
|
||||
hellgrauem Grund -- unlesbar. Der Schleier allein reicht dafuer
|
||||
nicht: Er ist ein Verlauf ueber die ganze Buehne und muesste, um
|
||||
auch Weiss zu decken, so kraeftig sein, dass von einem dunklen
|
||||
Banner nichts uebrig bliebe. Ein Wert, der fuer beide Faelle passt,
|
||||
existiert nicht.
|
||||
|
||||
ALSO ZWEI EBENEN STATT EINER:
|
||||
der Schleier -- sanft, fuer das Gesamtbild
|
||||
dieser Grund -- kraeftig, aber nur hinter der Schrift
|
||||
|
||||
Er reicht 34 px ueber den Text hinaus und laeuft nach oben aus,
|
||||
damit keine sichtbare Kante entsteht. Die Deckung unten (.93) ist
|
||||
nicht geschaetzt: Sie ist der Wert, bei dem der Titel auch auf
|
||||
reinem Weiss ueber 4,5:1 kommt -- gemessen am Bildpunkt in
|
||||
pruef-eventkarte.mjs, nicht gerechnet.
|
||||
|
||||
WARUM NICHT EINFACH EIN KASTEN: Eine sichtbare Flaeche unter dem
|
||||
Titel saehe aus wie ein Balken, der ueber dem Bild klebt. Der
|
||||
Verlauf gehoert zur Buehne und faellt nicht auf -- bis man ihn
|
||||
braucht. */
|
||||
/* ---- "Banner ganz" ---------------------------------------------------
|
||||
Oben rechts, klein, und nur dort, wo es ein Bild gibt. Er liegt UEBER
|
||||
dem Schleier (der Schleier hat `pointer-events: none`, trotzdem
|
||||
braucht der Knopf seine eigene Ebene) und bringt seinen eigenen
|
||||
dunklen Grund mit -- auf einem hellen Banner waere er sonst
|
||||
unsichtbar, genau wie es dem Titel erging. */
|
||||
.ev-buehne__ganz {
|
||||
position: absolute; top: 12px; right: 12px;
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
/* 34 px hoch mit 10 px Polsterung: Auf dem Handy wird daraus unten
|
||||
ein 44-px-Ziel. */
|
||||
padding: 7px 11px;
|
||||
border: 1px solid rgba(255, 255, 255, .16);
|
||||
border-radius: 999px;
|
||||
background: rgba(8, 11, 18, .72);
|
||||
backdrop-filter: blur(7px);
|
||||
color: #dce7f3;
|
||||
font-size: .74rem; font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
||||
}
|
||||
.ev-buehne__ganz:hover {
|
||||
background: rgba(8, 11, 18, .9);
|
||||
border-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
.ev-buehne__ganz:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* Die Lupe ist gezeichnet, kein Schriftzeichen: Ein Symbol aus der
|
||||
Schrift faellt auf manchen Systemen aus oder kommt als Kaestchen. */
|
||||
.ev-buehne__ganz-zeichen {
|
||||
flex: none; position: relative;
|
||||
width: 13px; height: 13px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.ev-buehne__ganz-zeichen::before,
|
||||
.ev-buehne__ganz-zeichen::after {
|
||||
content: ""; position: absolute;
|
||||
background: currentColor;
|
||||
}
|
||||
.ev-buehne__ganz-zeichen::before { left: 2.5px; top: 5px; width: 6px; height: 1.4px; }
|
||||
.ev-buehne__ganz-zeichen::after { left: 4.8px; top: 2.7px; width: 1.4px; height: 6px; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ev-buehne__ganz { transition: none; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.ev-buehne__ganz { top: 9px; right: 9px; padding: 9px 12px; }
|
||||
/* Auf schmalen Schirmen nur die Lupe -- "Banner ganz" neben einem
|
||||
Titel, der ohnehin umbricht, kostet eine Zeile. Die Beschriftung
|
||||
bleibt fuer Vorleseprogramme erhalten (aria-label), sie wird nur
|
||||
nicht gezeigt. */
|
||||
.ev-buehne__ganz-wort {
|
||||
position: absolute; width: 1px; height: 1px;
|
||||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ev-buehne__inhalt { position: relative; }
|
||||
.ev-buehne[data-mitbild="ja"] .ev-buehne__inhalt::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--ev-rand)); right: calc(-1 * var(--ev-rand));
|
||||
bottom: -16px; top: -34px;
|
||||
background: linear-gradient(to top,
|
||||
rgba(4, 7, 12, .93) 0%,
|
||||
rgba(4, 7, 12, .90) 52%,
|
||||
rgba(4, 7, 12, .62) 82%,
|
||||
rgba(4, 7, 12, 0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Die Kinder muessen UEBER diesen Grund -- ein absolut gesetztes
|
||||
::before liegt sonst ueber allem, was selbst nicht positioniert ist,
|
||||
und der Titel waere verschwunden. Genau so ist es beim ersten
|
||||
Versuch passiert. */
|
||||
.ev-buehne__kopf, .ev-zeit, .ev-zeitbalken { position: relative; }
|
||||
|
||||
/* ---- Titelzeile auf der Buehne -------------------------------------- */
|
||||
.ev-buehne__kopf { align-items: center; gap: 8px 10px; }
|
||||
|
||||
/* DER TITEL IST DER TITEL (gemessen: vorher 15,36 px, also 1,4 px mehr
|
||||
als der Text darunter -- das liest niemand als Ueberschrift).
|
||||
|
||||
clamp statt fester Zahl: Eine feste Groesse ist eine Rechnung von
|
||||
gestern, sobald die Karte breiter oder schmaler wird. Hier skaliert
|
||||
sie mit der Breite und bleibt zwischen 1,15 rem (18,4 px) und
|
||||
1,55 rem (24,8 px). */
|
||||
.eintrag-karte[data-eventkarte="ja"] .eintrag-titel {
|
||||
flex: 1 1 100%;
|
||||
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.22;
|
||||
letter-spacing: -.01em;
|
||||
color: #f2f6fb;
|
||||
/* Der Schatten ist keine Zierde: Er haelt den Titel auch dann
|
||||
lesbar, wenn genau an dieser Stelle ein heller Fleck im Banner
|
||||
liegt -- und das sieht man einem Bild vorher nicht an. */
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
/* DAS ETIKETT: 10,88 px waren unter der projekteigenen Grenze von
|
||||
11,5 px -- angehoben wurde es bisher nur auf dem Handy. Hier gilt
|
||||
dieselbe Groesse auf jedem Geraet; eine Grenze, die nur bei schmalen
|
||||
Fenstern gilt, ist keine Grenze. */
|
||||
.eintrag-karte[data-eventkarte="ja"] .marke-art {
|
||||
font-size: .75rem;
|
||||
padding: 2px 10px;
|
||||
background: rgba(10, 14, 22, .62);
|
||||
border: 1px solid rgba(255, 255, 255, .14);
|
||||
backdrop-filter: blur(6px);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ---- Die Zeitzeile -------------------------------------------------- */
|
||||
.ev-zeit {
|
||||
display: flex; align-items: center; flex-wrap: wrap;
|
||||
gap: 6px 10px;
|
||||
margin: 10px 0 0;
|
||||
font-size: .84rem;
|
||||
}
|
||||
|
||||
/* "noch 13 Tage" -- die Antwort, nicht der Beleg. Deshalb die kraeftige
|
||||
Marke, waehrend das Datum daneben leise bleibt. */
|
||||
.ev-noch {
|
||||
--f: var(--k-neutral, #8e9cb0);
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--f) 16%, rgba(8, 11, 18, .72));
|
||||
color: color-mix(in srgb, var(--f) 72%, #ffffff);
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ev-noch::before {
|
||||
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--f); flex: none;
|
||||
}
|
||||
.ev-noch[data-stand="laeuft"] { --f: var(--k-gut, #5fc99a); }
|
||||
.ev-noch[data-stand="kommt"] { --f: var(--k-mittel, #e8b877); }
|
||||
.ev-noch[data-stand="vorbei"] { --f: var(--k-neutral, #8e9cb0); }
|
||||
/* DIE LETZTEN TAGE SIND NICHT ROT.
|
||||
|
||||
Signalrot waere hier falsch: Ein auslaufendes Event ist kein Fehler,
|
||||
sondern der Normalfall -- jedes endet. Es wird nur waermer und
|
||||
kraeftiger, damit man es im Vorbeischauen sieht, ohne erschreckt zu
|
||||
werden. */
|
||||
.ev-noch[data-dringend="ja"] {
|
||||
--f: var(--k-mittel, #e8b877);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ev-spanne {
|
||||
color: #c3d2e2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
/* ---- Der Zeitbalken -------------------------------------------------- */
|
||||
.ev-zeitbalken {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
margin-top: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .14);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ev-zeitbalken__fuellung {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--akzent, #3fbdf5) 70%, transparent),
|
||||
color-mix(in srgb, var(--violett, #8a76ff) 80%, transparent));
|
||||
transition: width var(--tempo, .22s) ease;
|
||||
}
|
||||
.ev-buehne[data-stand="vorbei"] .ev-zeitbalken__fuellung {
|
||||
background: rgba(255, 255, 255, .26);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ev-zeitbalken__fuellung { transition: none; }
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DER KOERPER: Text, Aufgaben, Regeln
|
||||
--------------------------------------------------------------------- */
|
||||
.eintrag-karte[data-eventkarte="ja"] .eintrag-text {
|
||||
margin: 14px 18px 0;
|
||||
color: var(--text-leise);
|
||||
/* EINE ZEILE HAT EINE LESBARE LAENGE. Auf 1280 px lief der
|
||||
Erklaertext ueber 1120 px -- rund 150 Zeichen je Zeile. Das Auge
|
||||
findet den Anfang der naechsten Zeile dann nicht mehr zuverlaessig;
|
||||
die gaengige Empfehlung liegt bei 45 bis 75 Zeichen. 72ch ist das
|
||||
obere Ende davon und passt zu dieser Schriftgroesse. */
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
/* ZWEI SPALTEN, WENN PLATZ IST -- GEMESSEN, NICHT GERECHNET.
|
||||
|
||||
`auto-fit` mit einer Mindestbreite bricht genau dann um, wenn eine
|
||||
Spalte unter 300 px fiele. Das ist der Unterschied zu einer
|
||||
Fensterbreite in einer Zahl: Kommt irgendwann ein dritter Block
|
||||
dazu oder wird die Karte in einer schmaleren Spalte gezeigt, stimmt
|
||||
es weiterhin, ohne dass jemand die Zahl nachzieht.
|
||||
|
||||
(Die Lehre dazu steht im Projektgedaechtnis unter dem 06.09.2026:
|
||||
eine feste Schwelle, die beim Hinzufuegen des naechsten Elements
|
||||
nicht nachgezogen wurde, hat zwoelf Seiten lang den falschen Knopf
|
||||
getroffen.) */
|
||||
.ev-bloecke {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
margin: 14px 18px 0;
|
||||
}
|
||||
.ev-bloecke .ev-block { margin: 0; }
|
||||
|
||||
.ev-block {
|
||||
margin: 14px 18px 0;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .022);
|
||||
}
|
||||
|
||||
/* AUFGABEN UND REGELN SEHEN NICHT MEHR GLEICH AUS.
|
||||
|
||||
Vorher waren es zwei identische graue Kaesten untereinander -- "was
|
||||
ich tun soll" und "was dabei gilt" wirkten damit gleich wichtig.
|
||||
Die Aufgaben sind das, weswegen jemand hier ist; sie bekommen einen
|
||||
Rand in der Hausfarbe. Die Regeln treten zurueck, ohne zu
|
||||
verschwinden. */
|
||||
.ev-block--aufgaben {
|
||||
border-color: color-mix(in srgb, var(--akzent, #3fbdf5) 24%, var(--rand));
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--akzent, #3fbdf5) 7%, transparent),
|
||||
transparent 58%),
|
||||
rgba(255, 255, 255, .022);
|
||||
}
|
||||
.ev-block--regeln { background: rgba(255, 255, 255, .012); }
|
||||
/* Alles geschafft: ein ruhiger gruener Rand, kein Konfetti. */
|
||||
.ev-block--aufgaben[data-fertig="ja"] {
|
||||
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 34%, var(--rand));
|
||||
}
|
||||
|
||||
.ev-block__kopf {
|
||||
display: flex; align-items: baseline;
|
||||
gap: 10px; margin-bottom: 9px;
|
||||
}
|
||||
/* DIE ZAHL GEHOERT ZUR UEBERSCHRIFT, NICHT AN DEN RAND.
|
||||
|
||||
Mit `justify-content: space-between` stand "0 von 3" auf einer
|
||||
1160 px breiten Karte rund einen Meter von dem Wort entfernt, auf
|
||||
das es sich bezieht -- man liest es dann als zwei verschiedene
|
||||
Angaben. Jetzt steht es direkt daneben, abgesetzt durch einen
|
||||
Trennpunkt statt durch Leere. */
|
||||
.ev-zaehler::before {
|
||||
content: "·";
|
||||
margin-right: 8px;
|
||||
color: var(--text-still);
|
||||
opacity: .7;
|
||||
}
|
||||
.ev-block__schild {
|
||||
margin: 0;
|
||||
/* .75rem = 12 px. Nicht kleiner: In Grossbuchstaben mit Sperrung
|
||||
wirkt eine Schrift kleiner, als die Zahl sagt -- die Begruendung
|
||||
steht so schon beim alten .event-block__schild. */
|
||||
font-size: .75rem; font-weight: 700;
|
||||
letter-spacing: .09em; text-transform: uppercase;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
|
||||
/* "1 von 3" -- die Zahl gehoert neben die Ueberschrift und nicht
|
||||
darunter: Sie ist die Zusammenfassung der Liste, nicht ihr erster
|
||||
Eintrag. tabular-nums, damit sie beim Hochzaehlen nicht springt. */
|
||||
.ev-zaehler {
|
||||
font-size: .78rem; font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-still);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ev-zaehler[data-voll="ja"] { color: var(--k-gut, #5fc99a); }
|
||||
|
||||
/* ---- Die Liste ------------------------------------------------------- */
|
||||
.ev-liste {
|
||||
list-style: none;
|
||||
margin: 0; padding: 0;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
}
|
||||
.ev-punkt { margin: 0; }
|
||||
|
||||
/* EIN VORBEIGELAUFENES EVENT HAT KEINE KNOEPFE -- und ohne den Knopf
|
||||
fehlte der Zeile seine Polsterung: Beim ersten Lauf klebte
|
||||
"20 Live-Stunden" am linken Rand des Kastens, waehrend dieselbe
|
||||
Liste eine Karte darueber ordentlich eingerueckt stand. Zwei Listen
|
||||
nebeneinander, die verschieden aussehen, liest man als Fehler.
|
||||
|
||||
Deshalb bekommt die reine Anzeigezeile dasselbe Raster wie der
|
||||
Knopf -- nur eben ohne Hintergrund und ohne Zeiger. */
|
||||
.ev-punkt:not(:has(.ev-punkt__knopf)):not(.ev-punkt--regel) {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 9px 10px;
|
||||
font-size: .9rem; line-height: 1.45;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* DER GANZE PUNKT IST DER KNOPF, nicht nur ein Kaestchen daneben.
|
||||
|
||||
Ein 16-px-Kaestchen ist auf dem Handy ein Ziel von 16 x 16 px -- die
|
||||
gaengige Mindestgroesse liegt bei 44 x 44. Wer danebentippt, denkt,
|
||||
es sei kaputt. Die ganze Zeile zu nehmen loest beides: Das Ziel ist
|
||||
so breit wie die Karte, und man muss nicht zielen. */
|
||||
.ev-punkt__knopf {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
width: 100%;
|
||||
padding: 9px 10px;
|
||||
margin: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: .9rem;
|
||||
line-height: 1.45;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
||||
}
|
||||
.ev-punkt__knopf:hover {
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border-color: var(--rand);
|
||||
}
|
||||
.ev-punkt__knopf:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.ev-punkt__knopf[disabled] { opacity: .6; cursor: progress; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ev-punkt__knopf { transition: none; }
|
||||
}
|
||||
|
||||
/* Das Kaestchen. Leer ein Rahmen, voll ein Haken -- und der Haken ist
|
||||
gezeichnet (clip-path), kein Schriftzeichen: Ein Haken aus der
|
||||
Schrift sieht auf jedem System anders aus und faellt auf manchen
|
||||
ganz aus. */
|
||||
.ev-punkt__kaestchen {
|
||||
flex: none;
|
||||
width: 19px; height: 19px;
|
||||
margin-top: 1px;
|
||||
/* 62 % waren im Bildschirmfoto kaum auszumachen -- ein Kaestchen,
|
||||
das man suchen muss, laedt nicht zum Anfassen ein. Auf 92 %
|
||||
angehoben und mit etwas mehr Fuellung dahinter. */
|
||||
border: 1.5px solid color-mix(in srgb, var(--text-still) 92%, transparent);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, .055);
|
||||
position: relative;
|
||||
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
||||
}
|
||||
.ev-punkt__kaestchen::after {
|
||||
content: "";
|
||||
position: absolute; left: 4px; top: 4px;
|
||||
width: 9px; height: 5px;
|
||||
border-left: 2px solid #07101a;
|
||||
border-bottom: 2px solid #07101a;
|
||||
transform: rotate(-45deg) scale(.6);
|
||||
opacity: 0;
|
||||
transition: opacity var(--tempo, .22s), transform var(--tempo, .22s);
|
||||
}
|
||||
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen {
|
||||
background: var(--k-gut, #5fc99a);
|
||||
border-color: var(--k-gut, #5fc99a);
|
||||
}
|
||||
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen::after {
|
||||
opacity: 1; transform: rotate(-45deg) scale(1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ev-punkt__kaestchen, .ev-punkt__kaestchen::after { transition: none; }
|
||||
}
|
||||
|
||||
/* ABGEHAKT WIRD NICHT DURCHGESTRICHEN.
|
||||
|
||||
Durchgestrichener Text ist schlecht lesbar, und man will ihn
|
||||
weiterhin lesen koennen -- "22 Live-Stunden" bleibt die Bedingung,
|
||||
auch wenn sie erfuellt ist. Der Haken sagt es bereits; die Schrift
|
||||
tritt nur leicht zurueck. */
|
||||
.ev-punkt[data-abgehakt="ja"] .ev-punkt__text { color: var(--text-leise); }
|
||||
.ev-punkt__text { flex: 1 1 auto; overflow-wrap: anywhere; }
|
||||
|
||||
/* Die Regelliste: dasselbe Raster, aber ein Strich statt eines
|
||||
Kaestchens -- man sieht auf einen Blick, dass hier nichts zu tun
|
||||
ist. */
|
||||
.ev-punkt--regel {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 6px 10px;
|
||||
font-size: .87rem; line-height: 1.5;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
.ev-punkt__zeichen {
|
||||
flex: none;
|
||||
width: 19px; height: 19px;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
.ev-punkt__zeichen::before {
|
||||
content: "";
|
||||
position: absolute; left: 3px; top: 9px;
|
||||
width: 11px; height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: color-mix(in srgb, var(--text-still) 52%, transparent);
|
||||
}
|
||||
|
||||
/* Der Rueckfall, wenn der Server keine Punkteliste schickt. */
|
||||
.ev-rohtext {
|
||||
margin: 0;
|
||||
font-size: .87rem; line-height: 1.6; color: var(--text);
|
||||
white-space: pre-line;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* ---- Wer macht mit (nur fuer die Leitung) ---------------------------- */
|
||||
.ev-mitmacher {
|
||||
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
|
||||
margin-top: 11px; padding-top: 10px;
|
||||
border-top: 1px solid var(--rand);
|
||||
}
|
||||
.ev-mitmacher__schild {
|
||||
font-size: .7rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
margin-right: 2px;
|
||||
}
|
||||
.ev-mitmacher__person {
|
||||
padding: 2px 9px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
font-size: .76rem;
|
||||
color: var(--text-leise);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ev-mitmacher__person[data-voll="ja"] {
|
||||
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 40%, transparent);
|
||||
color: color-mix(in srgb, var(--k-gut, #5fc99a) 80%, #ffffff);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DER FUSS
|
||||
--------------------------------------------------------------------- */
|
||||
.eintrag-karte[data-eventkarte="ja"] .eintrag-fuss {
|
||||
margin: 16px 0 0;
|
||||
padding: 12px 18px 15px;
|
||||
border-top: 1px solid var(--rand);
|
||||
background: rgba(255, 255, 255, .012);
|
||||
}
|
||||
.eintrag-karte[data-eventkarte="ja"] .ampel {
|
||||
margin: 0; padding: 11px 18px 14px;
|
||||
border-top: 1px solid var(--rand);
|
||||
}
|
||||
|
||||
/* LOESCHEN SIEHT NICHT MEHR AUS WIE "ZUR AUFGABE".
|
||||
|
||||
Gemessen waren es vier gleich grosse, gleich graue Pillen
|
||||
nebeneinander -- darunter die eine, die man nicht rueckgaengig
|
||||
machen kann. Sie rutscht jetzt mit einem Abstand nach rechts weg und
|
||||
bekommt einen warmen Ton. KEIN Signalrot und keine Fuellung: Der
|
||||
Knopf soll sich unterscheiden, nicht drohen; erst beim Ueberfahren
|
||||
wird er deutlicher. */
|
||||
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr {
|
||||
margin-left: 10px;
|
||||
color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, var(--text-still));
|
||||
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 26%, transparent);
|
||||
}
|
||||
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr:hover {
|
||||
color: var(--warn, #ff9aa2);
|
||||
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 52%, transparent);
|
||||
background: color-mix(in srgb, var(--warn, #ff9aa2) 10%, transparent);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
EIN VORBEIGELAUFENES EVENT
|
||||
--------------------------------------------------------------------- */
|
||||
/* Die alte Regel dimmte die ganze Karte auf .82 -- damit war ein
|
||||
abgelaufenes Event kaum von einem laufenden zu unterscheiden, und der
|
||||
Text wurde schlechter lesbar, ohne dass es etwas brachte.
|
||||
|
||||
Jetzt tritt nur das BILD zurueck (entsaettigt und abgedunkelt). Der
|
||||
Text behaelt seinen vollen Kontrast: "alt" ist kein Grund, jemanden
|
||||
vom Lesen auszuschliessen. */
|
||||
.eintrag-karte[data-eventkarte="ja"][data-event="vorbei"] { opacity: 1; }
|
||||
.ev-buehne[data-stand="vorbei"] .ev-buehne__bild {
|
||||
filter: saturate(.35) brightness(.62);
|
||||
}
|
||||
.ev-buehne[data-stand="vorbei"] { aspect-ratio: 3.6 / 1; max-height: 190px; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
AUF DEM HANDY
|
||||
--------------------------------------------------------------------- */
|
||||
@media (max-width: 560px) {
|
||||
.ev-buehne {
|
||||
aspect-ratio: 1.9 / 1;
|
||||
min-height: 150px; max-height: 230px;
|
||||
--ev-rand: 14px;
|
||||
padding: 38px var(--ev-rand) 13px;
|
||||
}
|
||||
.ev-buehne[data-stand="vorbei"] { aspect-ratio: 2.6 / 1; max-height: 160px; }
|
||||
.eintrag-karte[data-eventkarte="ja"] .eintrag-text { margin: 12px 14px 0; }
|
||||
.ev-bloecke { margin: 12px 14px 0; gap: 12px; }
|
||||
.ev-block { margin: 12px 14px 0; padding: 12px 12px; }
|
||||
.ev-bloecke .ev-block { margin: 0; }
|
||||
.eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { padding: 12px 14px 14px; }
|
||||
.eintrag-karte[data-eventkarte="ja"] .ampel { padding: 11px 14px 13px; }
|
||||
/* Das Beruehrziel: 9 px Polsterung plus 19 px Kaestchen ergaeben
|
||||
37 px. Auf dem Handy wird daraus 44 -- dieselbe Zahl wie bei allen
|
||||
anderen Knoepfen des Hauses. */
|
||||
.ev-punkt__knopf { min-height: 44px; align-items: center; }
|
||||
/* Der Loeschknopf steht auf dem Handy in einer eigenen Zeile; ein
|
||||
Abstand nach links wuerde ihn dort nur einruecken. */
|
||||
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr { margin-left: 0; }
|
||||
}
|
||||
|
||||
/* Hoher Kontrast: Die Zustandsfarben verschwinden dort, also muss die
|
||||
Form sprechen. */
|
||||
@media (forced-colors: active) {
|
||||
.ev-buehne__schleier { display: none; }
|
||||
.ev-punkt__kaestchen { border: 2px solid CanvasText; }
|
||||
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen { background: Highlight; }
|
||||
.ev-zeitbalken { border: 1px solid CanvasText; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DER ZEILEN-EDITOR UND DIE VORSCHAU (03.10.2026)
|
||||
|
||||
Die Begruendung, warum es ihn gibt, steht bei zeilenEditor() in
|
||||
bereich.js: Ein leeres Textfeld zwingt den Menschen, die
|
||||
Aufzaehlungszeichen selbst zu tippen -- und dann sehen drei Zeilen
|
||||
auf drei Arten aus. Hier steht nur, wie er aussieht.
|
||||
===================================================================== */
|
||||
|
||||
.zeileneditor {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.zeileneditor__liste {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.zeileneditor__zeile {
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
}
|
||||
|
||||
/* Das Aufzaehlungszeichen steht VOR dem Feld und nicht darin: So sieht
|
||||
man schon beim Tippen, dass es gesetzt wird -- und man kommt gar
|
||||
nicht erst auf die Idee, selbst eines zu tippen. */
|
||||
.zeileneditor__zeichen {
|
||||
flex: none;
|
||||
width: 16px; height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.zeileneditor__zeichen::before {
|
||||
content: "";
|
||||
position: absolute; left: 4px; top: 6px;
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--akzent, #3fbdf5) 58%, transparent);
|
||||
}
|
||||
|
||||
.zeileneditor__feld {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
/* Dieselben Masse wie alle Felder des Hauses (--feld-ziel usw. in
|
||||
start.css) -- ein Eingabefeld, das sich von den anderen
|
||||
unterscheidet, sieht nach einem Fremdkoerper aus. */
|
||||
min-height: 40px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, .035);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.zeileneditor__feld:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 1px;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Der Wegnehmen-Knopf: ein Kreuz, gezeichnet statt getippt -- ein
|
||||
Mal-Zeichen aus der Schrift sitzt je nach System anders. */
|
||||
.zeileneditor__weg {
|
||||
flex: none;
|
||||
width: 34px; height: 34px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-still);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: color var(--tempo, .22s), background var(--tempo, .22s),
|
||||
border-color var(--tempo, .22s);
|
||||
}
|
||||
.zeileneditor__weg::before,
|
||||
.zeileneditor__weg::after {
|
||||
content: "";
|
||||
position: absolute; left: 10px; top: 16px;
|
||||
width: 12px; height: 1.6px; border-radius: 2px;
|
||||
background: currentColor;
|
||||
}
|
||||
.zeileneditor__weg::before { transform: rotate(45deg); }
|
||||
.zeileneditor__weg::after { transform: rotate(-45deg); }
|
||||
.zeileneditor__weg:hover {
|
||||
color: var(--warn, #ff9aa2);
|
||||
background: color-mix(in srgb, var(--warn, #ff9aa2) 9%, transparent);
|
||||
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 24%, transparent);
|
||||
}
|
||||
.zeileneditor__weg:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.zeileneditor__weg { transition: none; }
|
||||
}
|
||||
|
||||
.zeileneditor__fuss {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin-top: 7px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.zeileneditor__mehr {
|
||||
padding: 7px 14px;
|
||||
min-height: 36px;
|
||||
border: 1px dashed color-mix(in srgb, var(--akzent, #3fbdf5) 34%, var(--rand));
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--akzent, #3fbdf5) 72%, #cfe0f0);
|
||||
font: inherit; font-size: .84rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
||||
}
|
||||
.zeileneditor__mehr:hover {
|
||||
background: color-mix(in srgb, var(--akzent, #3fbdf5) 10%, transparent);
|
||||
border-style: solid;
|
||||
}
|
||||
.zeileneditor__mehr:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.zeileneditor__mehr { transition: none; }
|
||||
}
|
||||
|
||||
/* Der Weg zurueck zum Textfeld steht LEISE daneben: Der Normalfall ist
|
||||
die Liste, das Textfeld ist der Ausweg fuer den Sonderfall. */
|
||||
.zeileneditor__wechsel {
|
||||
padding: 6px 2px;
|
||||
min-height: 36px;
|
||||
border: 0; background: transparent;
|
||||
color: var(--text-still);
|
||||
font: inherit; font-size: .79rem;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.zeileneditor__wechsel:hover { color: var(--text-leise); }
|
||||
.zeileneditor__wechsel:focus-visible {
|
||||
outline: 2px solid var(--akzent, #3fbdf5);
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Der Hinweis "Läuft 14 Tage." -- und die Warnung, wenn das Ende vor
|
||||
dem Anfang liegt. Die Warnung ist ein WORT und nicht nur eine Farbe:
|
||||
Wer Farben schlecht unterscheidet, saehe sonst gar nichts. */
|
||||
#hinweis-dauer[data-warnung="ja"] {
|
||||
color: var(--warn, #ff9aa2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE VORSCHAU
|
||||
--------------------------------------------------------------------- */
|
||||
.ev-vorschau {
|
||||
margin: 18px 0 4px;
|
||||
padding: 14px;
|
||||
border: 1px dashed var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .012);
|
||||
}
|
||||
.ev-vorschau__schild {
|
||||
margin: 0 0 10px;
|
||||
font-size: .72rem; font-weight: 700;
|
||||
letter-spacing: .09em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
/* Die Vorschau zeigt nur die Buehne -- der Rest der Karte haengt an
|
||||
Daten, die es vor dem Speichern noch nicht gibt (Knoepfe, Ampel,
|
||||
Rueckmeldungen). Eine Vorschau, die etwas zeigt, das hinterher
|
||||
fehlt, ist schlimmer als eine kurze. */
|
||||
.ev-vorschau .eintrag-karte { margin-bottom: 0; }
|
||||
|
||||
Reference in New Issue
Block a user