/* Blue Movie Hub (App) Gestaltung auf den Tokens des VectorOneBase Designbaukastens. Das Gerüst (Kopf, Drei-Spalten-Bild, mobile Icon-Leiste, Zahnrad-Panel) gehört dem Seitentyp ka-feed-page; die Marke folgt dem data-realm-Vertrag (, Referenz im Paket-README). Hier bleiben nur das Marken-Profil und die Inhalte der Ansichten — Pink = Vollton der Marke, Blau wirkt über den Verlauf (Kachel, CTA-Knopf, Avatar, Glow). */ /* --- Marken-Profil (Pink × Blau, Referenzwerte des data-realm-Vertrags) ----- */ [data-realm='bmh'] { --brand-gradient: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); /* Seitentypen des Baukastens (Einstieg/Auth): Kachel + Hintergrund-Glow. */ --entry-brand-tile-background: var(--brand-gradient); --entry-hero-background: radial-gradient(40rem 22rem at 18% -10%, color-mix(in oklab, #ec4899 22%, transparent), transparent 70%), radial-gradient(44rem 24rem at 84% -8%, color-mix(in oklab, #3b82f6 26%, transparent), transparent 70%); --auth-logo-background: var(--brand-gradient); --auth-page-background: radial-gradient(40rem 22rem at 18% -10%, color-mix(in oklab, #ec4899 22%, transparent), transparent 70%), radial-gradient(44rem 24rem at 84% -8%, color-mix(in oklab, #3b82f6 26%, transparent), transparent 70%); /* Seitentypen des Baukastens (Feed/Konto): Kachel-Verlauf + Glow — nach dem Login dieselbe Marke wie vor dem Login. */ --feed-brand-tile-background: var(--brand-gradient); --feed-page-background: radial-gradient(40rem 22rem at 18% -10%, color-mix(in oklab, #ec4899 22%, transparent), transparent 70%), radial-gradient(44rem 24rem at 84% -8%, color-mix(in oklab, #3b82f6 26%, transparent), transparent 70%); --account-brand-tile-background: var(--brand-gradient); --account-page-background: radial-gradient(40rem 22rem at 18% -10%, color-mix(in oklab, #ec4899 22%, transparent), transparent 70%), radial-gradient(44rem 24rem at 84% -8%, color-mix(in oklab, #3b82f6 26%, transparent), transparent 70%); /* Aktiver Menüeintrag: der Marken-Verlauf mit Weiß — wie der CTA-Knopf (Token der geteilten Menü-Spezifikation, Baukasten 4.8.0). */ --ka-page-menu-active-background: var(--brand-gradient); --ka-page-menu-active-color: #ffffff; /* Komplette Alias-Leiter (hell). */ --ka-color-brand-fill-quiet: color-mix(in oklab, #ec4899 10%, transparent); --ka-color-brand-fill-normal: color-mix(in oklab, #ec4899 16%, transparent); --ka-color-brand-fill-loud: #ec4899; --ka-color-brand-border-quiet: color-mix(in oklab, #ec4899 35%, transparent); --ka-color-brand-border-normal: #f9a8d4; --ka-color-brand-border-loud: #ec4899; --ka-color-brand-on-quiet: #c2185b; --ka-color-brand-on-normal: #9d174d; --ka-color-brand-on-loud: #ffffff; } .ka-dark[data-realm='bmh'] { --ka-color-brand-fill-quiet: color-mix(in oklab, #ec4899 16%, transparent); --ka-color-brand-fill-normal: color-mix(in oklab, #ec4899 24%, transparent); --ka-color-brand-fill-loud: #ec4899; --ka-color-brand-border-quiet: color-mix(in oklab, #ec4899 45%, transparent); --ka-color-brand-border-normal: #be185d; --ka-color-brand-border-loud: #f472b6; --ka-color-brand-on-quiet: #f472b6; --ka-color-brand-on-normal: #f9a8d4; --ka-color-brand-on-loud: #ffffff; } /* Verlaufs-Oberflächen (CTA-Knöpfe der Seitentypen). */ [data-realm='bmh'] ka-entry-page ka-button[variant='brand']::part(base), [data-realm='bmh'] ka-auth-page ka-button[variant='brand']::part(base), [data-realm='bmh'] ka-feed-page ka-button[variant='brand']::part(base), [data-realm='bmh'] ka-account-page ka-button[variant='brand']::part(base) { background: var(--brand-gradient); border-color: transparent; } * { box-sizing: border-box; } body { margin: 0; background: var(--ka-color-surface-lowered); color: var(--ka-color-text-normal); font-family: var(--ka-font-family-body); } /* Inline-Icons: aus der eingebetteten System-Library des Baukastens (ka-icon); die Größe folgt der Schriftgröße des Elements. */ .icon { font-size: 1.25rem; flex: none; } /* --- Ansichten (Inhalt der ka-feed-page) ------------------------------------ */ /* Ansichts-Container (Standard): stapelt die Karten jeder Ansicht mit Abstand — Ansichten liefern Karten direkt, ohne eigenen Stapel-Rahmen (DESIGN-REGELN §16.13); verschachtelte Stapel (z. B. Beitragslisten) nutzen weiter .view. */ #ansicht-ziel { display: flex; flex-direction: column; gap: 1.25rem; } .view { display: flex; flex-direction: column; gap: 1.25rem; } .view h1 { margin: 0; font-family: var(--ka-font-family-heading); font-size: var(--ka-font-size-2xl); } .view h1:focus { outline: none; } /* Menü-Beschriftungen der ka-feed-page: auf kleinen Ansichten zeigt die Leiste unten nur die Icons (Konvention des Seitentyps). */ @media (max-width: 70rem) { .menue-label { display: none; } } /* --- Feed-Beiträge ------------------------------------------------------------ */ /* Beiträge sind ka-cards; ihre inneren Abschnitte tragen die Abstände. */ .beitrag::part(body) { padding: 0; } .beitrag-kopf { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem 0; } .avatar-initial { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; background: var(--brand-gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--ka-font-weight-semibold); font-size: var(--ka-font-size-l); text-transform: uppercase; } .beitrag-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .beitrag-creator { font-weight: var(--ka-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .beitrag-meta { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); } .beitrag-text { margin: 0; padding: 0.75rem 1.25rem 0; color: var(--ka-color-text-normal); white-space: pre-line; overflow-wrap: break-word; } .beitrag-medien { padding: 1rem 1.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .beitrag-aktionen { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem 1.25rem; flex-wrap: wrap; } /* Medien-Rahmen: solange die signierte URL aussteht, ruhige Fläche; bei Fehlschlag (abgelaufen/verweigert) Hinweis statt Bild. */ .medium-rahmen { position: relative; background: var(--ka-color-surface-lowered); border-radius: var(--ka-border-radius-m, 0.45rem); overflow: hidden; } .medium-rahmen img { display: block; width: 100%; height: 100%; object-fit: cover; } .titelbild-rahmen { aspect-ratio: 16 / 9; } .medium-fehler img { display: none; } .medium-fehler::after { content: attr(data-fehler-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); text-align: center; } .folge-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .folge-gitter .medium-rahmen { aspect-ratio: 1; } /* Schloss-Overlay auf geschützten Folgebildern (Unschärfe-Derivat darunter) */ .schloss-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; background: color-mix(in srgb, black 35%, transparent); color: #fff; } .schloss-overlay .icon { font-size: 1.6rem; } .schloss-overlay span { font-size: var(--ka-font-size-2xs); font-weight: var(--ka-font-weight-semibold); } /* --- Wallet / Schiene --------------------------------------------------------- */ .coin-stand { font-size: var(--ka-font-size-2xl); font-weight: var(--ka-font-weight-bold); font-family: var(--ka-font-family-heading); } .coin-stand small { font-size: var(--ka-font-size-s); font-weight: var(--ka-font-weight-normal); color: var(--ka-color-text-quiet); } .schiene-hinweis { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); margin: 0.75rem 0 0; } .wallet-zustaende { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; } /* --- Auth (Einstieg/Onboarding Inhalte) --------------------------------------- */ /* Inhalte der Seitentyp-Slots (light DOM der App): die Punkte-Liste unter den Handlungsaufrufen der ka-entry-page und Begleittexte in der Karte. Die Liste liegt als schmaler Block mittig — die Marker stehen am Text. */ .einstieg-liste { margin: 0 auto; padding-inline-start: 1.25rem; width: fit-content; text-align: start; display: flex; flex-direction: column; gap: 0.4rem; color: var(--ka-color-text-quiet); } .start-text { margin: 0.75rem 0 0; color: var(--ka-color-text-quiet); } form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .absende-knopf { margin-top: 0.25rem; } .absende-knopf::part(base) { width: 100%; } .formular-hinweis { margin: 0; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); text-align: center; } .textlink { background: none; border: none; padding: 0; color: var(--ka-color-text-link); font-size: var(--ka-font-size-s); text-decoration: underline; cursor: pointer; align-self: center; } /* --- Erstellen -------------------------------------------------------------------- */ /* Der native Datei-Input bleibt unsichtbar (das native Stylesheet des Designpakets setzt display auf input — das hidden-Attribut allein verliert dagegen). */ input[type="file"][hidden] { display: none !important; } .datei-feld { display: flex; flex-direction: column; gap: 0.5rem; } .datei-label-text { font-size: var(--ka-font-size-s); font-weight: var(--ka-font-weight-semibold); } .datei-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .datei-name { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); } .vorschau-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .vorschau-bild { position: relative; aspect-ratio: 1; border-radius: var(--ka-border-radius-m, 0.45rem); overflow: hidden; background: var(--ka-color-surface-lowered); } .vorschau-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .vorschau-bild .entfernen-knopf { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: none; cursor: pointer; background: color-mix(in srgb, black 55%, transparent); color: #fff; font-size: 0.9rem; line-height: 1; } .vorschau-bild.titel { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .coins-feld[hidden] { display: none; } .zaehler { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); text-align: right; } /* --- Profil und Konto ------------------------------------------------------- */ /* Zeilen-Gitter (dt/dd) und Aktions-/Gerätezeilen: derselbe Aufbau wie in der Admin-Zentrale (gleiche Klassennamen, gleiche Regeln) — Konto-Seiten aller Produkte sehen gleich aus (Konto-Standard). */ .konto-gitter { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; } .konto-zeile { display: flex; gap: 0.75rem; align-items: baseline; min-width: 0; } .konto-zeile dt { flex: none; width: 7.5rem; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .konto-zeile dd { margin: 0; min-width: 0; overflow-wrap: break-word; } .profil-bio { white-space: pre-line; } .konto-hinweis { margin: 0.25rem 0 0; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .aktion-liste { display: flex; flex-direction: column; margin-top: 0.25rem; } .aktion-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; flex-wrap: wrap; } .aktion-zeile + .aktion-zeile { border-top: 1px solid var(--ka-color-surface-border); } .aktion-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .aktion-titel { font-weight: var(--ka-font-weight-semibold); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .aktion-beschreibung { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .geraet-liste { display: flex; flex-direction: column; gap: 0.85rem; margin: 0.85rem 0; } .geraet-zeile { display: flex; align-items: center; gap: 0.75rem; } .geraet-zeile .icon { font-size: 1.4rem; color: var(--ka-color-text-quiet); } #geraete-werkzeuge { margin-top: 0.25rem; } .beitrag-werkzeuge { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .beitrag-status { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } /* --- Ladezustand / Meldungen -------------------------------------------------------- */ .lade-block { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 0; color: var(--ka-color-text-quiet); } .visually-note { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .retry-knopf { margin-top: 1rem; } .meldung { margin: 0.25rem 0; } .meldung:empty { display: none; }