DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agentur-Events: zwei Karten nebeneinander, Banner in der Mitte

Browse Source 
Filipe: "ich will dass die kachel an sich noch viel geiler und krass
aussieht. die soll aber auch garnicht so breit sein. es sollen immer
zwei neben einander stehen können und wenn man auf banner anzeigen
drückt soll das banner schön in der mitte sein."

GEMESSEN VORHER: Karte 1160 px breit, eine je Reihe (#liste stand auf
display: block). --ton: #cace02 an ALLEN drei Zustaenden -- ein seit
drei Tagen vorbeigelaufenes Event leuchtete wie eines, das laeuft. Und
border-left-width: 0px, border-radius: 0px: Die Dringlichkeitskante aus
bereich.css kommt seit dem Baukasten nicht mehr an (module.css setzt
border: 0, gleich stark und spaeter im Ladeweg).

ZWEI NEBENEINANDER -- die Regel SIEBT, statt zu schalten. #liste traegt
das Raster immer; alles, was keine Eventkarte ist, nimmt mit
`grid-column: 1 / -1` die ganze Breite. In den sieben anderen Bereichen
aendert sich damit kein Pixel. Gemessen: Eventkarten 573 px, die
Schulung daneben weiterhin 1160 px; auf 412 px steht wieder eine je
Reihe (379 px, kein seitliches Schieben).

DAS BANNER KOMMT IN DIE MITTE -- und zwar in der BILDSCHAU, die es seit
dem 25.09.2026 gibt und die hier nur nie angeschlossen war. Sie wurde
damals fuer genau diese Beschwerde gebaut ("wenn man bilder aufmacht,
will ich dass die in der mitte sind"). Ihr Stil ist dafuer aus chat.css
in eine eigene bildschau.css gezogen: bereich.html laedt chat.css nicht,
und 5815 Zeilen Chat auf einer Seite ohne Chat waere der falsche Preis.
Gemessen: 1178x662 px, Mitte 640 gegen 640, Escape schliesst, die Seite
springt nicht weg. Der Weg in den Tab bleibt (mittlere Maustaste, Strg).

ZWEI FEHLER, DIE DIE SCHMALERE KARTE ERST SICHTBAR GEMACHT HAT:

 1. `justify-content: flex-end` an der Buehne laesst den Inhalt nach
    OBEN herauslaufen, wenn der Platz nicht reicht -- und die Karte hat
    ein clip-path, also ist er dann weg. Gemessen: Das Etikett
    "Agentur-Events" sass auf einer Karte bei y = -28 px. Die alte
    Messung fragte nach Farbe, Groesse, Sichtbarkeit und Deckkraft und
    bekam auf alles die richtige Antwort -- nach der LAGE hatte sie nie
    gefragt. Jetzt `margin-top: auto`, das kann nicht herauslaufen.

 2. Die Buehnenhoehe kam aus der BREITE (aspect-ratio 2.6/1, bei
    "vorbei" 3.6/1 mit max-height 190px). Bei halber Kartenbreite
    bricht der Titel auf mehr Zeilen um: Inhalt 231 px, Kasten 220 px
    -- der Zeitbalken lag auf dem Satz darunter. Jetzt eine
    Mindesthoehe, der Rest kommt vom Inhalt. Das Banner liegt absolut
    darin und fuellt jede Hoehe; die Rechnung brauchte es nie.

AUSSERDEM: Jeder Zustand traegt seinen Ton (laeuft = Agenturgelb,
kommt = kuehl, vorbei = stumpf) und faerbt damit Eckwinkel, Kantenlicht
und Zeitbalken mit. Die Farbkante der Karte liegt im Hintergrund statt
auf einem Pseudoelement (beide gehoeren dem Baukasten), 6 px, weil das
Kantenlicht 1,6 px verdeckt. Der Aufgabenzaehler ist eine Pille statt
grauer Text, gleich hohe Karten mit dem Fuss unten.

pruef-eventkarte: 77 -> 94 Pruefungen, gruen. Zwei Gegenproben gefahren
(Ueberlaufschutz entfernt -> rot mit "ev-buehne__inhalt oben -28px";
die neue Lagepruefung nennt den Schuldigen selbst). Neu darin: nichts
darf aus einer Karte herausragen (132 Teile), der Inhalt muss in jede
Buehne passen, und auf 412 px steht eine Karte je Reihe.
Dazu gruen: chat-anhaenge (168, die Bildschau nach dem Umzug),
chat-optik, chat, css-klassen, haus-trennung, lesbarkeit, eintrag-bild,
tippziele, fingermass, leerzustand.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-10-07 00:52:53 +02:00
co-authored by Claude Opus 5
parent aaee74818f
commit da557b5288
51 changed files with 1406 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/bereich.css
+232 -5
View File
@@ -5,6 +5,21 @@
.eintrag-karte {
padding: 15px 17px; margin-bottom: 10px;
background: var(--flaeche);
/* NACHGEMESSEN AM 07.10.2026: `border`, `border-left: 3px` und
`border-radius` kommen hier NICHT an. Gemessen am lebenden System
stand an der Karte `border-left-width: 0px`, `border-top-width:
0px`, `border-radius: 0px` -- module.css setzt fuer die ganze
Modulliste `border: 0; border-radius: 0`, ist mit (0,2,0) gleich
stark und wird SPAETER geladen.
Damit ist auch die Farbcodierung der Dringlichkeit darunter
wirkungslos: Die drei Zeilen `[data-dringlich] { border-left-color }`
faerben einen Rand, den es nicht gibt. Das steht hier als Befund
und wird fuer die EVENTKARTEN weiter unten geloest (ueber den
Hintergrund, weil ::before und ::after dem Baukasten gehoeren).
Fuer die uebrigen Karten bleibt es vorerst stehen -- das waere ein
eigener Umbau an acht Bereichen, und dafuer gibt es noch kein
Messgeraet. */
border: 1px solid var(--rand);
border-left: 3px solid var(--rand);
border-radius: var(--radius-klein);
@@ -2189,7 +2204,23 @@ body[data-ton] .kopf-zeile::before {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* NICHT `justify-content: flex-end` (berichtigt 07.10.2026).
Beides schiebt den Inhalt nach unten, solange Platz ist. Der
Unterschied zeigt sich erst, wenn KEINER mehr da ist: `flex-end`
laesst den Inhalt oben aus der Buehne herauslaufen -- und die
Karte hat ein `clip-path`, also ist er dann einfach weg.
Gemessen am 07.10.2026, nachdem die Karten halb so breit wurden:
Auf der Karte „September Rueckblick" sass das Etikett
„Agentur-Events" bei y = -28 px, also 28 px ueber der Kartenkante.
Im Bildschirmfoto fehlte es schlicht; die Messung sagte trotzdem
„sichtbar, Deckkraft 1" -- sie hatte nur nie nach der LAGE gefragt.
`margin-top: auto` am Inhalt tut dasselbe und kann das nicht:
Reicht der Platz nicht, beginnt der Inhalt oben, statt
herauszulaufen. */
justify-content: flex-start;
/* DIE HOEHE IST GEDECKELT, UND ZWAR ZWEIFACH.
aspect-ratio haelt die Form bei schmalen Karten (sonst waere die
@@ -2210,9 +2241,37 @@ body[data-ton] .kopf-zeile::before {
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;
/* ===== DIE HOEHE KOMMT VOM INHALT, NICHT VON DER BREITE ==========
(07.10.2026, nachgemessen)
Hier stand `aspect-ratio: 2.6/1` mit `max-height: 300px`. Das war
richtig, solange die Karte ueber die ganze Breite lief: Die Buehne
war dann 300 px hoch und der Titel passte bequem hinein.
Seit die Eventkarten nur noch halb so breit sind, bricht der Titel
auf mehr Zeilen um -- und die Hoehe kam weiterhin aus der BREITE:
573 / 2.6 = 220 px. Gemessen am 07.10.2026:
Oktober Event Inhalt 231 px, Kasten 220 px
September Rueckblick Inhalt 189 px, Kasten 159 px
Der Ueberhang lief unten heraus und legte den Zeitbalken auf den
Satz darunter. Eine Form, die aus der Breite folgt, kann das nicht
wissen -- und der Fehler faellt genau dann auf, wenn die Breite
sich aendert.
JETZT: eine Mindesthoehe, damit die Buehne auf einer schmalen Karte
kein Briefschlitz wird, und sonst so hoch, wie der Inhalt es
braucht. Das Banner liegt absolut darin (`inset: 0`, `object-fit:
cover`) und fuellt jede Hoehe -- es braucht die Rechnung gar nicht.
Der frueher noetige 300-px-Deckel ist damit hinfaellig: Die Hoehe
waechst nicht mehr mit der Breite, sondern mit dem Titel.
`flex: 0 0 auto` kommt dazu, weil die Buehne ein Flex-Element der
Karte ist und sonst zusammengedrueckt werden darf -- genau das,
was hier gerade schiefging, nur von aussen. */
min-height: 170px;
max-height: 300px;
flex: 0 0 auto;
/* 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
@@ -2373,7 +2432,11 @@ body[data-ton] .kopf-zeile::before {
}
}
.ev-buehne__inhalt { position: relative; }
/* `margin-top: auto` statt `justify-content: flex-end` an der Buehne --
die Begruendung steht dort. Der Inhalt ist das einzige Stueck der
Buehne, das im Fluss liegt (Bild, Schleier und der Knopf „Banner
ganz" sind absolut gesetzt), deshalb genuegt diese eine Zeile. */
.ev-buehne__inhalt { position: relative; margin-top: auto; }
.ev-buehne[data-mitbild="ja"] .ev-buehne__inhalt::before {
content: "";
position: absolute;
@@ -2809,7 +2872,18 @@ body[data-ton] .kopf-zeile::before {
.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; }
/* EIN VORBEIGELAUFENES EVENT BEKAM EINE FLACHERE BUEHNE -- ueber
`aspect-ratio: 3.6/1` und `max-height: 190px`. Beides rechnet die
Hoehe aus der BREITE, und genau daran ist es am 07.10.2026
zerbrochen, als die Karten halb so breit wurden: 573 / 3.6 = 159 px,
waehrend der Inhalt 189 px brauchte. Der Zeitbalken lag danach auf
dem Satz darunter.
Die Absicht bleibt -- ein abgelaufenes Event soll weniger Platz
einnehmen --, nur wird sie jetzt ueber die MINDESThoehe ausgedrueckt:
Es faengt flacher an und waechst trotzdem mit, wenn der Titel drei
Zeilen braucht. Dieselbe Entscheidung wie oben an der Grundregel. */
.ev-buehne[data-stand="vorbei"] { min-height: 120px; }
/* ---------------------------------------------------------------------
AUF DEM HANDY
@@ -3037,3 +3111,156 @@ body[data-ton] .kopf-zeile::before {
Rueckmeldungen). Eine Vorschau, die etwas zeigt, das hinterher
fehlt, ist schlimmer als eine kurze. */
.ev-vorschau .eintrag-karte { margin-bottom: 0; }
/* =====================================================================
ZWEI EVENTKARTEN NEBENEINANDER (07.10.2026)
=====================================================================
Filipe: „die soll aber auch garnicht so breit sein. es sollen immer
zwei neben einander stehen können."
GEMESSEN VORHER: Die Karte war 1160 px breit, eine je Reihe
(`#liste` stand auf `display: block`). Bei einem Banner, das ohnehin
nur 300 px hoch sein darf, heisst das: ein Drittel Bild, zwei Drittel
Luft daneben.
DIE REGEL SIEBT, STATT ZU SCHALTEN. `#liste` traegt das Raster
IMMER -- und alles, was keine Eventkarte ist, nimmt die ganze Breite
(`grid-column: 1 / -1`). In den sieben anderen Bereichen aendert sich
dadurch kein Pixel: Dort gibt es keine Eventkarten, also spannt jedes
Kind ueber beide Spalten und steht wie vorher untereinander. Eine
Umschaltung ueber eine zusaetzliche Klasse waere eine zweite Stelle,
an der jemand sie vergessen kann.
DIE 430 px ZAEHLEN ETWAS: Darunter wird die Buehne zum Briefschlitz
und die vier Fussknoepfe brechen auf drei Zeilen um. Mit
`auto-fill` entscheidet damit der Platz, nicht eine Fensterbreite --
derselbe Grund wie bei der Scout-Pipeline: Eine Zahl, die das FENSTER
misst, weiss nichts von Raendern und vom 1240-px-Deckel des Inhalts.
GLEICH HOHE KARTEN in einer Reihe sind Absicht und nicht Zufall: Die
Eckwinkel des Baukastens rahmen jede Karte sichtbar ein, und zwei
verschieden hohe Rahmen nebeneinander lesen sich als Unfall. Damit
der Fuss trotzdem unten sitzt, ist die Karte eine Spalte mit
`margin-top: auto` am Fuss. */
#liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
gap: 14px;
}
#liste > *:not(.eintrag-karte[data-eventkarte="ja"]) { grid-column: 1 / -1; }
/* 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[data-eventkarte="ja"] {
display: flex;
flex-direction: column;
/* Die Buehne liegt am oberen Rand und soll ihn beruehren -- das
seitliche Polster der Karte wuerde sie einrahmen wie ein Passepartout.
Der Inhalt darunter holt es sich selbst zurueck. */
padding: 0 0 15px;
}
#liste > .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; }
/* =====================================================================
DIE KARTE SAGT, OB DAS EVENT LAEUFT (07.10.2026)
=====================================================================
Vorher trugen alle drei Zustaende denselben Ton: `--ton: #cace02`,
die Farbe des Agentur-Bereichs -- gemessen an der lebenden Seite, an
einem Event, das seit drei Tagen vorbei war. Aus `--ton` nimmt der
ganze Baukasten in module.css seine Farbe (Kantenlicht, die drei
Eckwinkel, das Licht beim Zeigen). Ein abgelaufenes Event leuchtete
damit genauso wie das, das gerade laeuft.
DASSELBE MUSTER WIE IN DER SCOUT-PIPELINE, und aus demselben Grund:
`--ton` wird je Zustand gesetzt, dann faerbt sich die ganze Form mit.
laeuft behaelt den Agenturton -- das ist der Normalfall und soll
nach „jetzt" aussehen
kommt kuehl: es ist noch nichts zu tun
vorbei stumpf: es steht da, es ruft nicht mehr
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; }
/* DIE FARBKANTE LIEGT IM HINTERGRUND und nicht auf einem Pseudoelement:
::before (Kantenlicht) und ::after (Raster, Eckwinkel) gehoeren beide
dem Baukasten. 6 px, weil das Kantenlicht 1,6 px davon verdeckt --
bei 3 px blieb in der Nahaufnahme nichts Erkennbares uebrig (am
06.10.2026 an der Scout-Pipeline nachgemessen). */
#liste > .eintrag-karte[data-eventkarte="ja"] {
--ev-kante: 6px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--ev-ton, var(--akzent)) 92%, #ffffff) 0%,
color-mix(in srgb, var(--ev-ton, var(--akzent)) 65%, transparent) 50%,
color-mix(in srgb, var(--ev-ton, var(--akzent)) 12%, transparent) 100%)
left top / var(--ev-kante) 100% no-repeat,
radial-gradient(120% 70% at 0% 100%,
color-mix(in srgb, var(--ev-ton, var(--akzent)) 9%, transparent) 0%,
transparent 60%),
var(--flaeche);
transition: background-size var(--tempo, .18s) ease;
}
#liste > .eintrag-karte[data-eventkarte="ja"]:hover { --ev-kante: 9px; }
/* ---- Der Zeitbalken traegt den Zustand ------------------------------
Er stand auf Blau-Violett -- derselbe Verlauf bei einem Event, das
laeuft, und bei einem, das seit zwoelf Tagen vorbei ist. Jetzt sagt
schon die Farbe, welcher Fall vorliegt, und man muss die Zeile
darueber nicht erst lesen. */
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-zeitbalken__fuellung {
background: linear-gradient(90deg,
color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, transparent),
color-mix(in srgb, var(--ev-ton, var(--akzent)) 95%, #ffffff));
}
/* Dicker als 4 px: Bei halber Kartenbreite ist der Balken nur noch
knapp 500 px lang, und ein 4-px-Faden darin ist eher Linie als
Anzeige. */
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-zeitbalken { height: 6px; }
/* ---- Der Aufgabenzaehler wird eine Anzeige --------------------------
„0 von 3" stand als grauer Text neben der Ueberschrift -- dieselbe
Schriftgroesse, dieselbe Farbe wie alles andere, und damit die
Antwort auf die wichtigste Frage der Karte („wie weit bin ich?") gut
versteckt. Jetzt eine Pille, die mitwaechst: still, solange nichts
geschafft ist, und im Ton von „erledigt", sobald alles steht. */
.ev-zaehler {
display: inline-flex; align-items: center;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--ev-ton, var(--akzent)) 30%, transparent);
background: color-mix(in srgb, var(--ev-ton, var(--akzent)) 12%, transparent);
color: color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, #ffffff);
/* .8rem = 12,8px -- ueber der Hausgrenze von 11,5px. */
font-size: .8rem;
}
.ev-zaehler[data-voll="ja"] {
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 45%, transparent);
background: color-mix(in srgb, var(--k-gut, #5fc99a) 15%, transparent);
color: var(--k-gut, #5fc99a);
}
/* Ist alles abgehakt, bekommt auch der Block einen Saum -- die Karte
soll das aus einem Meter Abstand sagen, nicht erst beim Lesen. */
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-block[data-fertig="ja"] {
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 38%, transparent);
background: color-mix(in srgb, var(--k-gut, #5fc99a) 7%, transparent);
}
@media (prefers-reduced-motion: reduce) {
#liste > .eintrag-karte[data-eventkarte="ja"] { transition: none; }
}
@media (forced-colors: active) {
.ev-zaehler { border: 1px solid CanvasText; }
}
workspace/assets/css/bildschau.css
+176
View File
@@ -0,0 +1,176 @@
/* =====================================================================
bildschau.css — der Stil zur Bildschau (umgezogen am 07.10.2026)
=====================================================================
NICHT AUFGERAEUMT, SONDERN UMGEZOGEN. Diese Regeln standen in
chat.css, weil die Bildschau am 25.09.2026 fuer den Chat gebaut
wurde. Am 07.10.2026 sollte auch das Event-Banner darin geoeffnet
werden -- und bereich.html laedt chat.css nicht. Es gab also genau
zwei Wege: chat.css (5815 Zeilen) auf einer Seite mitladen, die
keinen Chat hat, oder die 26 Regeln dorthin stellen, wo sie
hingehoeren.
Dieselbe Entscheidung wie bei der Code-Anzeige, die am 11.09.2026
von personen.css nach start.css gewandert ist: Sobald ein Bauteil
an ZWEI Stellen gebraucht wird, gehoert es keiner der beiden mehr.
DIE REIHENFOLGE BLEIBT: In chat.html steht diese Datei direkt hinter
chat.css, also genau dort, wo der Block vorher endete. Nach ihm kamen
nur Regeln zum Bearbeiten einer Chatnachricht, die mit der Schau
nichts zu tun haben -- nachgezaehlt, nicht angenommen: null fremde
Regeln im Block, 26 eigene.
===================================================================== */
/* =====================================================================
=====================================================================
DIE BILDSCHAU (25.09.2026)
=====================================================================
=====================================================================
Filipe: „wenn man bilder aufmacht, will ich dass die in der mitte
sind. beim hochformat soll links der husky sein und rechts der hase
und beim querformat soll oben dogfather und unten team dogi stehen
da wo platz ist. … ich will nicht dahin geschmissen sondern was
richtig geiles mit einem geilen hintergrund."
DER GRUND IST DREI SCHICHTEN, nicht eine Farbe: ein tiefer Verlauf,
drei weiche Lichter (violett, tuerkis, ein warmer Rest) und ein
Schleier ganz aussen. Zusammen unter zehn Prozent Deckung -- ein
Foto soll darauf liegen, nicht dagegen ankaempfen.
KEIN REINES SCHWARZ. Genau das zeigt der Browser von sich aus, und
genau daran hat Filipe es gemerkt. Schwarz ist keine Gestaltung,
sondern ihr Fehlen.
===================================================================== */
.bildschau {
width: 100vw; max-width: 100vw;
height: 100dvh; max-height: 100dvh;
padding: 0; margin: 0; border: 0;
background: none;
overflow: hidden;
color: var(--text, #e8f1fa);
}
.bildschau::backdrop { background: rgba(3, 4, 9, .86); backdrop-filter: blur(6px); }
.bildschau__grund {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(70% 55% at 18% 8%, rgba(122, 92, 255, .16), transparent 66%),
radial-gradient(62% 52% at 84% 88%, rgba(38, 200, 196, .13), transparent 68%),
radial-gradient(48% 40% at 60% 46%, rgba(255, 176, 92, .06), transparent 70%),
linear-gradient(168deg, #0a0b14 0%, #070811 55%, #05060c 100%);
}
/* Ein Schleier von aussen nach innen -- er zieht den Blick in die
Mitte, ohne dass man ihn als Rahmen bemerkt. */
.bildschau__grund::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}
/* ---- Die Buehne: das Bild sitzt in der MITTE ----------------------- */
.bildschau__buehne {
position: absolute; inset: 0; z-index: 2;
display: grid; place-items: center;
padding: 72px 4vw 56px;
}
.bildschau__bild {
max-width: 92vw; max-height: 82dvh;
width: auto; height: auto;
border-radius: 14px;
/* Ein feiner heller Saum trennt das Foto vom Grund, auch wenn seine
Raender selbst dunkel sind. Ohne ihn franst ein dunkles Foto in
den Hintergrund aus, und man sieht nicht mehr, wo es aufhoert. */
box-shadow:
0 0 0 1px rgba(255, 255, 255, .1),
0 40px 90px -40px rgba(0, 0, 0, .95),
0 0 90px -40px rgba(122, 92, 255, .5);
}
/* ---- Die Begleiter ------------------------------------------------- */
/* Sie liegen HINTER dem Bild (z-index 1 gegen 2) -- ein Husky, der
ueber einem Foto liegt, waere keine Zierde, sondern ein Hindernis. */
.bildschau__figur {
position: absolute; bottom: 0; z-index: 1;
height: min(78dvh, 720px);
width: auto;
opacity: 0;
pointer-events: none;
transition: opacity .32s ease;
}
.bildschau__figur--links { left: 0; }
/* NICHT SPIEGELN. Der erste Anlauf drehte den Hasen um, damit beide
„nach innen" schauen -- ein alter Reflex aus dem Plakatsatz. Auf dem
Probebild stand danach „Hasi Dog" seitenverkehrt auf seinem Hoodie.
Beide Figuren sehen ohnehin nach vorn; es gibt nichts zu spiegeln,
und Schrift im Bild spiegelt man nie. */
.bildschau__figur--rechts { right: 0; }
.bildschau[data-lage="hoch"] .bildschau__figur { opacity: .92; }
/* ---- Die zwei Schriftzuege ----------------------------------------- */
.bildschau__wort {
position: absolute; left: 0; right: 0; z-index: 1;
display: flex; align-items: center; justify-content: center; gap: 14px;
opacity: 0;
pointer-events: none;
transition: opacity .32s ease;
}
.bildschau__wort--oben { top: 18px; }
.bildschau__wort--unten { bottom: 16px; }
.bildschau[data-lage="quer"] .bildschau__wort { opacity: 1; }
.bildschau__zeichen { width: 34px; height: 34px; filter: invert(1) opacity(.72); }
/* GESPERRT UND GROSS: Ein Schriftzug ist kein Satz. Die Sperrung macht
aus zwei Woertern ein Zeichen -- man liest es nicht, man erkennt es. */
.bildschau__wort-text {
font-size: clamp(1.1rem, 2.6vw, 1.9rem);
font-weight: 800;
letter-spacing: .34em;
text-transform: uppercase;
color: rgba(232, 241, 250, .5);
text-shadow: 0 0 26px rgba(122, 92, 255, .45);
}
.bildschau__wort--unten .bildschau__wort-text {
font-size: clamp(.9rem, 2vw, 1.4rem);
letter-spacing: .42em;
color: rgba(232, 241, 250, .34);
}
/* ---- Die Leiste ---------------------------------------------------- */
.bildschau__leiste {
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(4, 5, 11, .78), transparent);
}
.bildschau__name {
flex: 1; min-width: 0;
font-size: .86rem; color: rgba(232, 241, 250, .7);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 44 px hoch, auch am Rechner: Der Schliessen-Knopf ist der einzige
Weg heraus, den man SIEHT (Escape kennt nicht jeder). */
.bildschau__knopf {
flex: none;
min-height: 44px; padding: 0 14px;
display: inline-flex; align-items: center;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: var(--text, #e8f1fa);
font: inherit; font-size: .84rem; font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.bildschau__knopf:hover { background: rgba(255, 255, 255, .13); }
.bildschau__knopf:focus-visible { outline: 2px solid #b9a7ff; outline-offset: 2px; }
.bildschau__zu { min-width: 44px; justify-content: center; padding: 0; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
.bildschau__figur, .bildschau__wort { transition: none; }
}
/* Auf einem Telefon fuellt ein Foto den Schirm -- dort gibt es keinen
Platz fuer Begleiter, und die Schau sagt das ueber `data-lage`
ohnehin selbst. Hier bleibt nur die Buehne enger. */
@media (max-width: 620px) {
.bildschau__buehne { padding: 64px 12px 24px; }
.bildschau__bild { max-width: 96vw; max-height: 78dvh; }
}
workspace/assets/css/chat.css
-153
View File
@@ -5558,159 +5558,6 @@
.chat__kopf .chat__kopf-zeichen { display: none; }
}
/* =====================================================================
=====================================================================
DIE BILDSCHAU (25.09.2026)
=====================================================================
=====================================================================
Filipe: „wenn man bilder aufmacht, will ich dass die in der mitte
sind. beim hochformat soll links der husky sein und rechts der hase
und beim querformat soll oben dogfather und unten team dogi stehen
da wo platz ist. … ich will nicht dahin geschmissen sondern was
richtig geiles mit einem geilen hintergrund."
DER GRUND IST DREI SCHICHTEN, nicht eine Farbe: ein tiefer Verlauf,
drei weiche Lichter (violett, tuerkis, ein warmer Rest) und ein
Schleier ganz aussen. Zusammen unter zehn Prozent Deckung -- ein
Foto soll darauf liegen, nicht dagegen ankaempfen.
KEIN REINES SCHWARZ. Genau das zeigt der Browser von sich aus, und
genau daran hat Filipe es gemerkt. Schwarz ist keine Gestaltung,
sondern ihr Fehlen.
===================================================================== */
.bildschau {
width: 100vw; max-width: 100vw;
height: 100dvh; max-height: 100dvh;
padding: 0; margin: 0; border: 0;
background: none;
overflow: hidden;
color: var(--text, #e8f1fa);
}
.bildschau::backdrop { background: rgba(3, 4, 9, .86); backdrop-filter: blur(6px); }
.bildschau__grund {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(70% 55% at 18% 8%, rgba(122, 92, 255, .16), transparent 66%),
radial-gradient(62% 52% at 84% 88%, rgba(38, 200, 196, .13), transparent 68%),
radial-gradient(48% 40% at 60% 46%, rgba(255, 176, 92, .06), transparent 70%),
linear-gradient(168deg, #0a0b14 0%, #070811 55%, #05060c 100%);
}
/* Ein Schleier von aussen nach innen -- er zieht den Blick in die
Mitte, ohne dass man ihn als Rahmen bemerkt. */
.bildschau__grund::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}
/* ---- Die Buehne: das Bild sitzt in der MITTE ----------------------- */
.bildschau__buehne {
position: absolute; inset: 0; z-index: 2;
display: grid; place-items: center;
padding: 72px 4vw 56px;
}
.bildschau__bild {
max-width: 92vw; max-height: 82dvh;
width: auto; height: auto;
border-radius: 14px;
/* Ein feiner heller Saum trennt das Foto vom Grund, auch wenn seine
Raender selbst dunkel sind. Ohne ihn franst ein dunkles Foto in
den Hintergrund aus, und man sieht nicht mehr, wo es aufhoert. */
box-shadow:
0 0 0 1px rgba(255, 255, 255, .1),
0 40px 90px -40px rgba(0, 0, 0, .95),
0 0 90px -40px rgba(122, 92, 255, .5);
}
/* ---- Die Begleiter ------------------------------------------------- */
/* Sie liegen HINTER dem Bild (z-index 1 gegen 2) -- ein Husky, der
ueber einem Foto liegt, waere keine Zierde, sondern ein Hindernis. */
.bildschau__figur {
position: absolute; bottom: 0; z-index: 1;
height: min(78dvh, 720px);
width: auto;
opacity: 0;
pointer-events: none;
transition: opacity .32s ease;
}
.bildschau__figur--links { left: 0; }
/* NICHT SPIEGELN. Der erste Anlauf drehte den Hasen um, damit beide
„nach innen" schauen -- ein alter Reflex aus dem Plakatsatz. Auf dem
Probebild stand danach „Hasi Dog" seitenverkehrt auf seinem Hoodie.
Beide Figuren sehen ohnehin nach vorn; es gibt nichts zu spiegeln,
und Schrift im Bild spiegelt man nie. */
.bildschau__figur--rechts { right: 0; }
.bildschau[data-lage="hoch"] .bildschau__figur { opacity: .92; }
/* ---- Die zwei Schriftzuege ----------------------------------------- */
.bildschau__wort {
position: absolute; left: 0; right: 0; z-index: 1;
display: flex; align-items: center; justify-content: center; gap: 14px;
opacity: 0;
pointer-events: none;
transition: opacity .32s ease;
}
.bildschau__wort--oben { top: 18px; }
.bildschau__wort--unten { bottom: 16px; }
.bildschau[data-lage="quer"] .bildschau__wort { opacity: 1; }
.bildschau__zeichen { width: 34px; height: 34px; filter: invert(1) opacity(.72); }
/* GESPERRT UND GROSS: Ein Schriftzug ist kein Satz. Die Sperrung macht
aus zwei Woertern ein Zeichen -- man liest es nicht, man erkennt es. */
.bildschau__wort-text {
font-size: clamp(1.1rem, 2.6vw, 1.9rem);
font-weight: 800;
letter-spacing: .34em;
text-transform: uppercase;
color: rgba(232, 241, 250, .5);
text-shadow: 0 0 26px rgba(122, 92, 255, .45);
}
.bildschau__wort--unten .bildschau__wort-text {
font-size: clamp(.9rem, 2vw, 1.4rem);
letter-spacing: .42em;
color: rgba(232, 241, 250, .34);
}
/* ---- Die Leiste ---------------------------------------------------- */
.bildschau__leiste {
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(4, 5, 11, .78), transparent);
}
.bildschau__name {
flex: 1; min-width: 0;
font-size: .86rem; color: rgba(232, 241, 250, .7);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 44 px hoch, auch am Rechner: Der Schliessen-Knopf ist der einzige
Weg heraus, den man SIEHT (Escape kennt nicht jeder). */
.bildschau__knopf {
flex: none;
min-height: 44px; padding: 0 14px;
display: inline-flex; align-items: center;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: var(--text, #e8f1fa);
font: inherit; font-size: .84rem; font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.bildschau__knopf:hover { background: rgba(255, 255, 255, .13); }
.bildschau__knopf:focus-visible { outline: 2px solid #b9a7ff; outline-offset: 2px; }
.bildschau__zu { min-width: 44px; justify-content: center; padding: 0; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
.bildschau__figur, .bildschau__wort { transition: none; }
}
/* Auf einem Telefon fuellt ein Foto den Schirm -- dort gibt es keinen
Platz fuer Begleiter, und die Schau sagt das ueber `data-lage`
ohnehin selbst. Hier bleibt nur die Buehne enger. */
@media (max-width: 620px) {
.bildschau__buehne { padding: 64px 12px 24px; }
.bildschau__bild { max-width: 96vw; max-height: 78dvh; }
}
/* =====================================================================
DIE DREI FAECHER AM FINGER (25.09.2026)