/* ============================================================================ DER HINTERGRUND HINTER DER OBERFLÄCHE Zwei Dinge in einem Blatt: die Ebene, die das Bild zeichnet (fünf Regeln), und das Fenster, in dem man es aussucht (der Rest). DIE EBENE IST EIN PSEUDOELEMENT, KEIN `background` am body – und das ist die ganze Konstruktion: – Der body trägt die Grundfarbe der Gesellschaft (`--brand-bg`). Sie soll UNTER dem Bild bleiben, denn die Motive zeichnen auf durchsichtigem Grund; ein `background-image` am body ersetzte nicht die Farbe, aber ein eigenes Deckkraftmaß hätte es nicht. – Die Stärke ist genau das: die Deckkraft dieser einen Ebene. Am body ginge das nur über einen zweiten Verlauf als Schleier darüber – und der müsste die Grundfarbe kennen, die von der Gesellschaft kommt. – `position: fixed` heißt: Das Bild rollt nicht mit. Ein mitrollendes Motiv hinter einer Liste, die gerollt wird, macht die Bewegung doppelt sichtbar und ist nach zwei Minuten unerträglich. WARUM `z-index: -1` FUNKTIONIERT: Der Grund des body wird auf die Leinwand des Browsers durchgereicht (das tut jeder Browser, solange selbst keinen Grund hat) und liegt damit UNTER dem negativen Stapel des body. Die Ebene steht also über der Farbe und unter allem Inhalt. Das Blatt setzt deshalb bewusst nirgends einen Grund am . HELL UND DUNKEL: Jedes Motiv gibt es zweimal, weil ein Bild in einer CSS-Adresse nichts von unseren Tokens weiß (assets/hintergrund/, werkzeuge/hintergruende.php). Beide Adressen stehen als `--hg-hell` und `--hg-dunkel` im Kopf (hintergrundStyleTag()), die Weiche steht hier – nach demselben Muster wie farbschemaStyleTag(): fester Fall am Attribut, der Fall „wie der Rechner" zusätzlich an der Medienabfrage. ============================================================================ */ :root { --hg-bild: var(--hg-hell); } html[data-farbschema="dunkel"] { --hg-bild: var(--hg-dunkel); } @media (prefers-color-scheme: dark) { html[data-farbschema="system"] { --hg-bild: var(--hg-dunkel); } } body.hat-hintergrund::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--hg-bild); background-size: var(--hg-mass, cover); background-repeat: var(--hg-wdh, no-repeat); background-position: center center; opacity: var(--hg-deckung, .6); /* Nichts an dieser Ebene ist anklickbar – sie liegt zwar hinter allem, aber ein `fixed` Element fängt sonst die Zeigerereignisse dort ab, wo darüber nichts steht (etwa neben der Spur der Seite). */ pointer-events: none; } /* Beim Umschalten hell/dunkel ohne Neuladen (assets/js/farbschema.js) tauscht die Ebene ihr Bild. Ohne Blende springt sie hart, während der Rest der Oberfläche schon weich wechselt. Wer Bewegung abbestellt hat, bekommt keine – dieselbe Regel wie überall im Haus. */ @media (prefers-reduced-motion: no-preference) { body.hat-hintergrund::before { transition: opacity var(--t-base) var(--ease-out); } } /* Beim Drucken bleibt der Grund weiß. Ein Motiv kostet auf Papier Tinte und trägt nichts bei; ein Foto macht die Zahlen darauf unlesbar. */ @media print { body.hat-hintergrund::before { display: none; } } /* ============================================================================ DAS FENSTER „HINTERGRUND" Es steht auf der Startseite im Anpassen-Modus („Ansicht anpassen") und benutzt den Dialogbaustein des Hauses (.bd-overlay/.bd-dialog aus 04-arbeitsflaechen.css). Eigen ist nur, was darin liegt. JEDE KACHEL IST EINE KLEINE OBERFLÄCHE, keine Bildvorschau: Grundfarbe, Motiv darüber in der eingestellten Art und ein weißes Kärtchen davor. Ein nacktes Bild sagte nichts darüber, wie es unter den Karten aussieht – und genau das ist die Frage, die der Benutzer beim Aussuchen hat. ============================================================================ */ .hg-dialog { max-width: 720px; } .hg-body { padding: var(--sp-5); } .hg-hinweis { margin: 0 0 var(--sp-5); font-size: var(--fs-5); line-height: 1.5; color: var(--brand-quiet); } /* auto-fill statt fester Spaltenzahl: Der Dialog wird auf schmalen Schirmen schmaler, und drei Kacheln nebeneinander wären dort drei Streifen. */ .hg-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--sp-4); } .hg-kachel { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } .hg-vorschau { position: relative; display: block; height: 86px; border: 1.5px solid var(--brand-border); border-radius: var(--r-sm); /* Derselbe Grund wie die Seite – das Motiv liegt auch hier NUR darüber. */ background-color: var(--brand-bg); background-image: var(--v-bild); background-size: var(--v-mass, cover); background-repeat: var(--v-wdh, no-repeat); background-position: center center; overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } /* Dieselbe Weiche wie an der Ebene selbst, eine Nummer kleiner – aber AM ELEMENT und nicht am :root: Die beiden Adressen stehen im style-Attribut jeder einzelnen Kachel. Stünde die Weiche im :root, löste `var(--v-hell)` dort ins Leere auf, und eine Custom Property, die ins Leere zeigt, wird nicht etwa geerbt, sondern ungültig (dieselbe Falle wie bei den eigenen Nachrichtenblasen im Gespräch). */ .hg-vorschau { --v-bild: var(--v-hell); } html[data-farbschema="dunkel"] .hg-vorschau { --v-bild: var(--v-dunkel); } @media (prefers-color-scheme: dark) { html[data-farbschema="system"] .hg-vorschau { --v-bild: var(--v-dunkel); } } /* Das Kärtchen: ein Stück Oberfläche, wie es später darauf liegt. Es steht links unten und nicht mittig – mittig sähe es aus wie ein Bildrahmen. */ .hg-vorschau-karte { position: absolute; left: 12px; right: 34px; bottom: 10px; height: 34px; border: 1px solid var(--brand-border); border-radius: var(--r-sm); background: var(--brand-surface); box-shadow: var(--sh-1); } .hg-vorschau-karte::before { /* Zwei angedeutete Zeilen darin – ohne sie ist es ein weißer Fleck. */ content: ""; position: absolute; inset: 9px 10px auto 10px; height: 4px; border-radius: 2px; background: var(--brand-quiet); opacity: .5; } .hg-vorschau-karte::after { content: ""; position: absolute; inset: auto 40% 9px 10px; height: 4px; border-radius: 2px; background: var(--brand-quiet); opacity: .28; } /* „Kein Bild" bekommt kein Motiv, sondern einen gestrichelten Rand – die Sprache des Leerzustands (.leer) im Rest des Hauses. */ .hg-vorschau.is-leer { border-style: dashed; } .hg-kachel:hover .hg-vorschau { border-color: var(--btn-blue); } .hg-kachel:focus-visible { outline: none; } .hg-kachel:focus-visible .hg-vorschau { border-color: var(--focus-col); box-shadow: 0 0 0 3px var(--btn-blue-bg-light); } .hg-kachel.is-gewaehlt .hg-vorschau { border-color: var(--btn-blue); box-shadow: 0 0 0 2px var(--btn-blue-bg-light); } /* Der Haken sitzt in der Ecke und erscheint nur an der gewählten Kachel. Er ist die Antwort auf „welches ist es denn jetzt?" – der blaue Rand allein ist auf einer Kachel, die selbst ein Bild trägt, zu leise. */ .hg-haken { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--btn-blue); color: #fff; opacity: 0; transform: scale(.7); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .hg-haken svg { width: 14px; height: 14px; } .hg-kachel.is-gewaehlt .hg-haken { opacity: 1; transform: none; } .hg-name { display: block; margin-top: 0.4rem; font-size: var(--fs-5); font-weight: 600; color: var(--brand-text); /* Ein eigenes Bild heißt, wie seine Datei hieß – „Urlaub-Gardasee-2025" passt in keine Kachelbreite. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hg-zusatz { display: block; font-size: var(--fs-4); color: var(--brand-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- Eigene Bilder -------------------------------------------------------------------------- */ .hg-eigen { position: relative; } /* Der Löschknopf ruht unsichtbar und kommt beim Überfahren – wie der Zeichenknopf im Haus ruht er neutral und wird erst unter dem Zeiger rot. Sichtbar ist er trotzdem immer für die Tastatur (:focus-within). */ .hg-weg { position: absolute; top: 6px; left: 6px; opacity: 0; background: var(--brand-surface); transition: opacity var(--t-fast) var(--ease-out); } .hg-eigen:hover .hg-weg, .hg-eigen:focus-within .hg-weg { opacity: 1; } .hg-weg:hover { color: var(--btn-red-text); } @media (hover: none) { /* Ohne Zeiger gibt es kein Überfahren – dort steht er einfach da. */ .hg-weg { opacity: 1; } } /* Die Ladefläche hat dieselbe Höhe wie eine Vorschau, damit die Reihe nicht springt, sobald das erste eigene Bild dazukommt. */ .hg-laden { /* Der Bezug für das versteckte Dateifeld darin – ohne ihn hinge es am Dialog und säße irgendwo in dessen Ecke. */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; height: 86px; padding: 0 0.6rem; border: 1.5px dashed var(--brand-line-strong); border-radius: var(--r-sm); background: transparent; color: var(--brand-quiet); text-align: center; cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .hg-laden:hover { border-color: var(--btn-blue); background: var(--btn-blue-bg-light); color: var(--btn-blue-dark); } .hg-laden input[type="file"] { /* Nicht display:none: Ein verstecktes Feld ist für die Tastatur nicht mehr erreichbar, und dann führt kein Weg mehr zum Hochladen. */ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hg-laden:focus-within { border-color: var(--btn-blue); box-shadow: 0 0 0 3px var(--btn-blue-bg-light); } .hg-laden-zeichen svg { width: 20px; height: 20px; } .hg-laden-text { font-size: var(--fs-5); font-weight: 600; } .hg-laden-zusatz { font-size: var(--fs-4); line-height: 1.3; } .hg-laden.is-voll { cursor: not-allowed; opacity: .6; } .hg-laden.is-voll:hover { border-color: var(--brand-line-strong); background: transparent; color: var(--brand-quiet); } /* Die Meldezeile steht unter der Reihe und trägt beides: den Fehlschlag (rot) und den Fortschritt beim Hochladen (leise). Zwei Zeilen für zwei Zustände wären eine, die immer leer ist. */ .hg-melder { margin: var(--sp-4) 0 0; font-size: var(--fs-5); color: var(--btn-red-text); } .hg-melder.ist-ruhig { color: var(--brand-quiet); } /* -------------------------------------------------------------------------- Die Stärke -------------------------------------------------------------------------- */ .hg-stufen { display: inline-flex; padding: 3px; border: 1px solid var(--brand-border); border-radius: var(--r-pill); background: var(--brand-bg); } .hg-stufe { padding: 0.3rem 0.9rem; border: 0; border-radius: var(--r-pill); background: transparent; font-size: var(--fs-5); font-weight: 600; color: var(--brand-quiet); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .hg-stufe:hover { color: var(--brand-text); } .hg-stufe.is-an { background: var(--brand-surface); color: var(--brand-text); box-shadow: var(--sh-1); } .hg-fuss { display: flex; justify-content: flex-end; padding: 0.75rem var(--sp-5); border-top: 1px solid var(--brand-border); }